CODEWITHSUNDEEP
imagefirebasedynamicreact-native
user3521011
user3521011

Reputation: 1521

display image dynamically from firebase in react native application

I already extracted data from firebase and displaying them. Now i need to display images also. In firebase database i have the same structure as the image below enter image description here

And I have a folder under my project that contains all images with the exact same name like for an example "Carl.png" I extracted the photo content in and combined with the rest of the path : "Myproject/img/"+photo+".png" and it's displayed correctly in the screen. But when i try to affect it to image i get errors. And here is the code i tried 

<Image style={{width: 50, height: 50}} source={{uri : (this.props.item.imageName)}}> </Image>

and i get this enter image description here and if i try to put in <Image style={{width: 50, height: 50}} source={{ uri: <Text> this.props.item.imageName </Text> }}> </Image> i get this enter image description here and if i put this code source={require(this.props.item.imageName)}
 here is what i get: unknown named module

Upvotes: 2

Views: 1421

Answers (3)

user3521011
user3521011

Reputation: 1521

actually, React native does not support the dynamic images even if they are stored locally and you just need to make their name dynamically variable. So, the only solution that i was obliged to use was to use a massive switch case and here the code i used: 

     switch (item.name) {
                case 'carl':
                    return (
                        <Image source{require('pathUnderProject/carl.png')}/>
                    );  
...
                default:
                    return (
                        <View >
                            <Text>{'Null'}</Text>
                        </View>
                    );

I know it's not the best solution, but at least i'm sure it's working fine and it won't break in the production environment

Upvotes: 0

KJ Siosan
KJ Siosan

Reputation: 36

Try loading it using require because you are loading it from a local storage, so your source attribute becomes: source={ require('./img/'+photo+'.png') }

Upvotes: 1

nehvaleem
nehvaleem

Reputation: 127

try with <Image style={{width: 50, height: 50}} source={{uri : (this.props.item.imageName)}} />

You've got space between opening & closing tag.

Upvotes: 0

Related Questions