CODEWITHSUNDEEP
xcodeimagerenderreact-native
Martin7_O
Martin7_O

Reputation: 29

React Native, render a local image

I'm trying to add an image in my app but it doesn't work. Below, this is my code : 

return(
    <View>
    <Text style={styles.text}>ABCDEFG</Text>
    <Image
        style={{width: 400, height: 400}}
        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/>

    <Image style={{width: 400, height: 400}} source={require('image!download')} />
    </View>
    );

Text is displaying. Below it, Facebook React logo is displaying. However, my download image doesn't show up. It's embedded because if I'm changing "download" to "mypicture" or something else, after refreshing, I obtain the following error : Requiring unknown module "image!mypicture". If you are sure the module is there, try restarting the packager.

I've restarted XCode and even my computer. I've commented Facebook logo just in case. I've seen in March, people had issues to render an image. Does someone has an idea ? I'm not familiar with XCode.

Thanks for helping me.

Upvotes: 0

Views: 984

Answers (1)

Dave Sibiski
Dave Sibiski

Reputation: 1740

If you are using xcassets, make sure the name of the image file itself is the same as the name in the xcassets section.

So in this case...the name of the image file should also be download.png. Make sure you use Xcode to add remove those images because it writes to a JSON file and just renaming the files on the file system won't update that file.

If you still have trouble with xcassets, you can just drop the images into your project in some group and access them by filename in React Native. You don't need xcassets although it has some benefits (like different resolution management).

Upvotes: 1

Related Questions