Fredric Sanjaya Fredric Sanjaya - 1 year ago 178
iOS Question

Can't show Image in React Native

I'm using react-native 0.28.0

I'm trying to show an image on iPhone simulator according to this tutorial:

var styles = StyleSheet.create({
image: {
width: 107,
height: 165,
padding: 10

var imageURI = ''

Then in the
function, I add this:

<Image style={styles.image} source={{uri:imageURI}} />

The space allocated for the image is there, but the image is not shown.

Answer Source

Hope the following two solutions can help you - both can be used for Image

  1. get your picture by an URI: source={{uri:imageURI}} you need to set for imageURI your uploaded picture

-> example: source={{uri: ''}}

Dont forgett to set the clip twice: {{}}

  1. get your picture by a local require:

Step 1: Safe your picture locally in your project folder and create a new folder for your images (folder: images)

Step 2 "Require" the picture you saved locally:

var yourPicture = require ('./images/picture.jpg');

Require hint: ('./') this notation is for the same folder. ('../') with this notation you can navigate one folder above (you can repeat this: '../../../')

Step 3 "Use" the picture at your render

        <Image source={yourPicture}/>

The style of your images works as you described