React Native Image component source as ES6 import images

Question

Is it possible to import images and use them in the source of an <Image /> component?

I have a lot of places where I need to conditionally display an icon or another, based on state. For example:

{isToggled ? (
  <Image
    resizeMode='contain'        
    source={require('../../assets/images/icon_chevron_up_B82BF9.png')}
    style={styles.toggleArrowImage}
  />
) : (
  <Image
    resizeMode='contain'
    source={require('../../assets/images/icon_chevron_down_B82BF9.png')}
    style={styles.toggleArrowImagew}
  />
)}

Or

const getToogleImageSource = () => {
  if (isToggled) {
    return require('../../assets/images/icon_chevron_up_B82BF9.png')
  }

  return require('../../assets/images/icon_chevron_down_B82BF9.png')
}

...
<Image
  resizeMode='contain'
  source={getToogleImageSource()}
  style={styles.toggleArrowImagew} 
/>

Looking at React Native documentation on Image , and search for this on StackOverflow, I always see solutions using require to get the source.

Hence my question about using ES6 import like this to reduce the number of lines of code (I also find it easier to read):

import chevronDown from ('../../assets/images/icon_chevron_down_B82BF9.png')
import chevronUp from ('../../assets/images/icon_chevron_up_B82BF9.png')

...

<Image
  resizeMode='contain'
  source={isToggled ? chevronUp : chevronDown}
  style={styles.toggleArrowImagew} 
/>

I tested it locally and it works fine, so I am wondering if this would cause a problem with a standalone app, due to the packager or something I ignore.

FYI, I have this in app.json:

"assetBundlePatterns": [
  "assets/images/*"
],

Thanks for you help.

[EDIT]: I forgot to mention that I am using Expo

Answer 1

I'm using the following method when using images in the react-native app. Though this is still using the required keyword, I get the following advantages which you are also seeking.

• less number of code lines and ability to avoid repetitive required keyword for the same image in many places.
• Since it is a single point of import, an image throughout the app can be changed with a single line of code.
• very high readability

---

Here is the implementation with 3 simple steps.

1. In your assets directory define an index file (index.tx) . if you are using js index.js

2. do your all imports in the index file

   const images = { logo: require('./logo.png'), splash_image: require('./splash_image.png'), chevronUp: require('./chevronUp.png'), chevronUp: require('./chevronDown.png'), } export default images;

3. import the index.tx to your component and use as follows. you can use any images by using image.filename . and also no more require keyword in your components.

    import images from '../../../assets'; ... <Image resizeMode='contain' source={isToggled? images.chevronUp: images.chevronDown} style={styles.toggleArrowImagew} />

hope this is what you are looking for:D

---

---

UPDATE after trying with import

just import the image as follows on the top fo the component.

import { ... , Image } from 'react-native';
import img_welcome from '../../images/welcome.png';

...

<Image source={img_welcome} />

this is perfectly working for me.

I don't have anything in the app.json except appnames

The only difference I see from your code and my working code is having a pair of round bracket () in the import statement

Cheers!