CODEWITHSUNDEEP
imagereact-native
Metallistener
Metallistener

Reputation: 197

Set image name from obj to source React Native

I've a ploblem with image Source and Obj's parameter.
Inside the local object I have IMG_NAME: 'A.png' like so:

I would like concatenate this value with source like

but I know require doesn't support concatenate so I decided ask you this question about the best way to solve this problem.

How can I try to solve this problem (my solve screenshot), and error image (Error reponse)

Upvotes: 2

Views: 1498

Answers (2)

L. Cafezeiro
L. Cafezeiro

Reputation: 69

I think there are 4 simple way to use a dynamic source in the Image Component:

1) You can use images that are already bundled into the app:

Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.

For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:

< Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

For images in the Android assets folder, use the asset:/ scheme:

< Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.


https ://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

2) You can use require('imagePath') into the object. 

{
  "id_letter": "1",
  "name_letter":"A",
  "img_name":require('./app/assets/images/imgname.jpg');
}



3) You can storage the images in the web and you can use: 

<Image source={{uri: 'http: //site.com/app/assets/images/'+data.img_name}}/>



4) You can storage the images using the library https://github.com/wkh237/react-native-fetch-blob.

Upvotes: -1

hawkup
hawkup

Reputation: 547

If you can modify the local object change to this

{
   "id_letter": "1",
   "name_letter": "A",
   "image" require("./app/assets/images/A.png")
}

and then Component change to 

<Image style={styles.letter_image} source={data.image} />

Edit Another Method use switch case statement

require not support dynamic path. Use switch case statement to solve this

function getImage(img_name) {
  switch(img_name) {
    case "A.png": return require("./app/assets/images/A.png");
    case "B.png": return require("./app/assets/images/B.png");
  }
}

<Image style={styles.letter_image} source={getImage(data.img_name)} />

Upvotes: 1

Related Questions