StuartM StuartM - 1 month ago 9
React JSX Question

React Native Adding images from data file

I have some static data like this:

{
"title": "Book an Appointment",
"image": "../img/icon_booking.png"
},
{
"title": "Client Gallery",
"image": "icon_gallery.png"
},
{
"title": "Save Before/After Photos",
"image": "icon_gallery.png"
},


I am creating a list view and want to pass the relevant image into the list view cell. The listview is setup as follows:

<ListView
dataSource={this.state.dataSource}
renderRow={(data) => <MainListRow {...data} />}
/>


The MainListRow is seutp as follows:

const BOOKING_ICON = require('./img/icon_booking.png');

const MainListRow = (props) => (
<View style={styles.container}>
{props.image ? <Image source={{uri: props.image}} style={styles.photo} /> : null}
<Text style={styles.text}>
{`${props.title}`}
</Text>
</View>
);

export default MainListRow;


I understand from other issues that the images need to be defined before calling them (example: How can I conditionally include images in React Native Component?)

I cannot figure out how to get the uri for the image to work correctly, even for one image. Ideally I just want to pass the image in and have it work. I have tried different variations of the path to try and get it correct and matching the initial require but it makes no difference.

Answer

As per the comment I was able to change my data structure and just require the image there:

var data = [
     {id: 1, text: 'row 1', image: require('./img/icon_booking.png')},
     {id: 2, text: 'row 2'},
     {id: 3, text: 'row 3'},
     {id: 4, text: 'row 4'},
     {id: 5, text: 'row 5'},
     {id: 6, text: 'row 6'},
     {id: 7, text: 'row 7'},
     {id: 8, text: 'row 8'},
     {id: 9, text: 'row 9'},
     {id: 10, text: 'row 10'},
    ];