React-native: Image require run before render

Question

I have list of image in project's assets. I call api to get image name.
Then I use that name to show image:

if (name !== null) {
    <Image source = {require('../assets/listImage/' + name)}/>
} else {
    <Image source = {require('../assets/listImage/abc.png')}/>
}

But app crash because of name is null. It crash even before first screen run (this code is in my 3rd screen in navigation)

UPDATE: full code: https://drive.google.com/open?id=1SlvJ7KRrhmewDxEBgJQ_QD47LUk6sDDb

if `name` is `null` app should not crash.. you have a `null` check there. Maybe you use somewhere else `name` and there the app crashes — oma, Nov 05 '18 at 09:41
https://drive.google.com/file/d/1SlvJ7KRrhmewDxEBgJQ_QD47LUk6sDDb/view?usp=sharing — Linh Quang Pham, Nov 05 '18 at 10:03

score 0 · Accepted Answer · answered Nov 05 '18 at 12:46

React-native doesn't support this kind of dynamically image loading.

What i mean is require('../assets/listImage/' + name)} in here name is dyanimcally added while running this application. But as far as i know it is not supported.

You can use below kind of image loading instead of this

if (name !== null) {
    switch(name) {
    case example1:
         <Image source = {require('../assets/listImage/image1')}/>
        break;
     case example2:
         <Image source = {require('../assets/listImage/image2')}/>
        break;
  ...........

}

And especially this name should be switch compatible otherwise use if the condition for it as well. Basically, I need to sat don't dynamically load image while running. Use this kind of code for it

Navigate to this React Native - Image Require Module using Dynamic Names and see answers. You can find another method that can use to load the image. Then select method what u want.

React-native: Image require run before render

1 Answers1