CODEWITHSUNDEEP
react-nativereact-native-flatlist
deepanshi gupta
deepanshi gupta

Reputation: 131

Use Images from Array in flatlist

I am implementing one scenario in which I am getting data from backend but I need to show image with each item. The image will come from local asset folder. I tried to use both array with flat-list but there is issue with the same. Could anyone let me know how to resolve that.

I am not able to understand how to implement that logic.

Thanks in advance!

Upvotes: 0

Views: 1987

Answers (1)

Areg Nikoghosyan
Areg Nikoghosyan

Reputation: 521

React Native FlatList renderItem callback get an object parameter with 3 props, item, index and separators:

renderItem({item, index, separators});

You don't have to define keys in your array, just the images sources and then use item and index inside your renderItem function:

Define just an array with the sources:

const [images, setimages] = useState([
  require('./assets/image1.png'),
  require('./assets/image2.png'),
  require('./assets/image3.png'),
  require('./assets/image4.png'),
  require('./assets/image5.png')
]);

And use item and index for source and key:

return (
  <FlatList
    horizontal={true} 
    showsHorizontalScrollIndicator={false} 
    data={images}
    renderItem={ ({ item, index }) => (
      <Image source={item} /* Use item to set the image source */
        key={index} /* Important to set a key for list items,
                       but it's wrong to use indexes as keys, see below */
        style={{
          width:260,
          height:300,
          borderWidth:2,
          borderColor:'#d35647',
          resizeMode:'contain',
          margin:8
        }}
      />
    )}
  />
);

Upvotes: 2

Related Questions