1

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)

Metallistener
  • 187
  • 1
  • 2
  • 16
  • Possible duplicate of [Dynamic requiring React Native images](https://stackoverflow.com/questions/40689099/dynamic-requiring-react-native-images) – Travis White Feb 09 '18 at 21:52

2 Answers2

1

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)} />
hawkup
  • 537
  • 1
  • 9
  • 15
  • I use JSON object, there is not use require how I know – Metallistener Feb 10 '18 at 10:39
  • **require** not support dynamic path I think you should to use switch case statement instead switch (img_name) { "A.png": return require("./app/assets/images/A.png"); "B.png": return require("./app/assets/images/B.png"); } – hawkup Feb 10 '18 at 11:50
  • still not dynamic – Mo. May 11 '18 at 22:03
0

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.

L. Cafezeiro
  • 71
  • 4
  • Ops, I'm sorry. I will edit the answer to be clearer. Excuse me for that. – L. Cafezeiro Feb 10 '18 at 12:08
  • 1
    Yeah i already thought about storage the images in the web server, but originally I wanted store them on local folder of app. About second option I wanna say that I use JSON object and inside it I can't keep value like: require('./app/assets/images/A.png') – Metallistener Feb 10 '18 at 12:50
  • So, the way i figure it, certainly, send the images to a web server is the best way to resolve this issue. – L. Cafezeiro Feb 10 '18 at 13:05
  • 1
    I know, but I create offline app and would like so that images loaded locally – Metallistener Feb 10 '18 at 13:33
  • Ok, I'll still continue to help. I'll make some tests here. I hope we'll figure out a solution. I will feedback. – L. Cafezeiro Feb 10 '18 at 13:38
  • @Metallistener What do you think about use the library react-native-fetch-blob: https://github.com/wkh237/react-native-fetch-blob? You can storage the images in the local storage and you can recover using a dynamic source. – L. Cafezeiro Feb 10 '18 at 13:48
  • 1
    Yes I think I'll use it, but I was hoping solve it without third-party things) – Metallistener Feb 10 '18 at 14:00
  • can you look at image?I added it in general question.Why is this happening? – Metallistener Feb 10 '18 at 18:39
  • Yes, I can. I think this error is due to you are trying to use a concatene string in the require function. But, unfortunately, the require function only receive a literal string. What do you think about you dive into the reac-native-fetch-blob code? I hope that the best way path to build what you are doing is using a AsyncStorage to storage the image in the local device and, so, you will can use a Image source={{uri:...}}. – L. Cafezeiro Feb 10 '18 at 19:02
  • Please, give just a minute. I am testing here. – L. Cafezeiro Feb 10 '18 at 19:11
  • 1
    I was testing require( `path/${data.img_name}` ), but unfortunately, doesn't works. – L. Cafezeiro Feb 10 '18 at 19:19
  • Yeah I know that It doesn't work)then I think the best way to solve this ploblem is use AsyncStorage How you tell me – Metallistener Feb 10 '18 at 19:44
  • You're welcome! I Will continue to try, If I figure out a best solution, I will post here – L. Cafezeiro Feb 10 '18 at 20:10
  • I'll be glad if you share with solution – Metallistener Feb 10 '18 at 20:15