How to render different Image source through locating the file REACT

Question

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

Kishan Bharda · Accepted Answer · 2020-01-09 04:40:33Z

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>
  )}
/>

answered Jan 9, 2020 at 4:40

Kishan Bharda

5,7314 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render different Image source through locating the file REACT

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related