I have an array of 150 buttons that link to 150 pictures, i need to show the picture once the button is pressed. The information for the buttons is stored in a JSON file. The pictures names are the ID's of the buttons, so 1.jpg, 2.jpg etc.
Now I am facing the problem that I can't write:
fish["image"] = {uri: "asset-library://" + fish.id + ".jpg"}; And the other solution with if statements does not work since I have so many options, any ideas?
Thanks so much
I had a similar problem. I built a function that contains a huge switch statement and has static requires for every case.
function getImage(id) { switch(id) { case 1: return require('./img/1.jpg'); case 2: return require('./img/2.jpg'); ... } } Now you can do
fish["image"] = getImage(fish.id); I also had to use over 100 icons, so instead of writing the cases by hand, I built a script that generates the function automatically.
I had too this problem for a component I developed. I used base64 image in json file. But maybe it's not a good fit for you, I hope it can help.
<Image style={styles.imgStyle} source={{uri: CountryFlags[country.cca2]}} /> You can see it here : https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/index.js#L137-L139
And if you have a folder with files on it, simply convert images like that :
#!/bin/sh list=`ls ./flags | grep '[A-Z]'` echo "{" for item in $list do header="data:image/png;base64," img64=`ls ./flags/$item | xargs cat | base64` echo ${item:0:2} :\'$header$img64\', done echo "}" 
cca2 Is that just an integer index value? Is that an undeclared variable and file suffix of your own design?