CODEWITHSUNDEEP
javascriptreact-native
Greg
Greg

Reputation: 1402

Handle arrays in react-native withouth listview

I'm quite new to react-native and I've managed to get a list of items with their detail page but I haven't found any solution on how I can load an array of strings on the detailpage without using a listview

I have an array of image URLs, how can I display these? Maybe I'm missing the point and I'm too much focused on ng-repeat in Angular

What I want to see:

<View>
 <Text>{item.title}</Text>
 <Text>{item.description}</Text>
 <Image></Image> //image 1
 <Image></Image> //image 2
 <Image></Image> //image 3
</View>

Upvotes: 0

Views: 50

Answers (1)

Nader Dabit
Nader Dabit

Reputation: 53711

You can map over the images and store them in a variable, then use the variable in your return statement:

const images = arrayOfImages.map((image, i) => {
    return <Image
             key={i}
             source={{uri: image}}
             style={styles.image} />
})

Then use the array like this:

<View>{images}</View>

I set up a working example here for more context.

https://rnplay.org/apps/f6A5NQ

Upvotes: 1

Related Questions