0

In the Image Block the Source uses the array of string from PlayerInfo. PlayerInfo consists string of arrays: 

require('../img/player1.jpg')
require('../img/player2.jpg')

In the image below I use the 

(image source= {item.item})

--> so that it looks like this 

(image source = require('../img/player1.jpg'))

BUT this seems to not work. What do I have to change inside the source to make the images appear?

enter image description here

Avinash Dalvi
  • 8,551
  • 7
  • 27
  • 53
Daniel Kang
  • 525
  • 4
  • 13
  • you cant use dynamic imports for image , thats a limitation in react -native . either host it in a server and pass the uri or check this link https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names – Gaurav Roy Jan 09 '20 at 05:19

1 Answers1

0

In order to use <Image> you should give it a static resource. So the problem is here:

[...playerInfo, `require('../img/player${numPlayer}.jpg')`]

you can implement the same functionality using a code like this:

const playerInfo=[
  {
    "index" : "1",
    "item" : require('../img/player1.jpg'),
  },
  {
    "index" : "2",
    "item" : require('../img/player2.jpg'),
  }
]

But I think if you have a large list of players creating a customized image component will come more handy:

class CustomizedImage extends Component {
    constructor(props) {
       super(props); 
    } 

    render() { 
       return (
         <Image source= {this.props.source} 
                resizeMode="contain" 
                style={{ height: this.props.height, width: this.props.width}} /> 
       ); 
    } 
}

then use it like this:

<CustomizedImage source= {require(`../img/player${numPlayer}.jpg`)} 
                 height={100}
                 width={100}             
/>

I haven't run this but it should work properly. Also creating your own customized components is a good way for developing an app, since you can change your package (for example use 'react-native-fast-image' instead) or other configs whenever you wish.

Zeynab Rostami
  • 423
  • 4
  • 13