CODEWITHSUNDEEP
javascriptreactjsreact-native
developer
developer

Reputation: 229

react native calling dynamic images from a local folder

I have an array which contains the path to images in a folder, I'm trying to display it but I'm having issues with it

      { 
      myGroups.map((item, index)=>{
      return (
        <Card key={index} style={{marginBottom:30}}>
            <CardItem>
              <Left>
                <Thumbnail 
                onPress={()=>navigation.navigate('GroupPosts')}
                source={require(item.img)} />
 )
               })
             }

This is the state

state = { 
myCreatedGroups: [ 
{ groupName: 'Group 1', about: 'sample', img:'../../assets/imgs/groups/1.jpg' }, 
{ groupName: 'Group 2', about: 'sample', img:'../../../assets/imgs/groups/2.jpg' }, 
{ groupName: 'Group 3', about: 'Sample', img:'../../../assets/imgs/groups/3.jpg' }, 
    ], 
}

Upvotes: 2

Views: 61

Answers (1)

Andrei
Andrei

Reputation: 44550

Try to use require(...) from the array items:

{ 
  groupName: 'Group 1', 
  about: 'sample', 
  img: require('../../assets/imgs/groups/1.jpg') //key difference here
}

And then you'll have:

<Thumbnail source={item.img} />

Upvotes: 1

Related Questions