Can't show Image in React Native

Question

I\'m using react-native 0.28.0

I\'m trying to show an image on iPhone simulator according to this tutorial: http://www.appcoda.com/react-native-introduction/

Answer 1

To anyone getting here, if the accepted answer didn't work for you, make sure your image has proper styling. For uri imported images, you'll need to set both height and width.

Answer 2

Side note on this issue. Upgrading from React Native 0.63.0 to 0.63.2 fixes an issue where remote images do not display on iOS 14 on device. I found this thread while searching for answers on it, so thought it might help anyone else in the same boat. Just upgrade. :)

Answer 3

I have uninstalled the previously installed app and it started working.

Answer 4

My issue was in path. react-native-fs returns path like /storage/emulated/0/Android/data/com.blah/blah.jpeg but Image components requires it to be file:///storage/emulated/0/Android/data/com.blah/blah.jpeg

Answer 5

In addition to Jonathan Stellwag's answer, the 1st solution only works if the URI is using https, or by setting the App Transport Security.

See Can't show Image by URI in React Native iOS Simulator

Answer 6

The issue I had coming from web was the uri parameter which I thought was url

Incorrect: <Image style={styles.image} source={ { url: product.image } }/>

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

Plus you have to set width and height to the image element

It took me a while to figure out