Set image name from obj to source React Native - image

Question

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)

Answer 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)} />

Answer 2

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.