2

I am trying to pull out different image source based on the image file name. Currently I have two image file: "player1.jpg" and "player2.jpg". The code below gets an array data which has the number and I am passing the number through Image Source; however, this method is not working. What method should I choose to acquire the image file I want to get?

enter image description here

Daniel Kang
  • 525
  • 4
  • 13

1 Answers1

2

Local image dynamic source will not work in react native directly. You have to create array of local image source and then you can use that array to display image.

For example create image array : 

const playersImages = [
  require('../img/player1.jpg'),
  require('../img/player2.jpg'),
  require('../img/player3.jpg'),
  require('../img/player4.jpg'),
  require('../img/player5.jpg')
];

And then use it as below : 

<FlatList
  data={playersImages}
  renderItem={({item}) => (
    <View>
      <Text>{item}</Text>
      <Image source={item} style={{height: 100, width: 100}} />
    </View>
  )}
/>
Kishan Bharda
  • 5,446
  • 3
  • 30
  • 57