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

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

Here is a sample code for Hamburger icon in image-

<Image source={{ uri: 'http://i.imgur.com/vKRaKDX.png', width: 32, height: 32, }} /> 

for more info you can refer here-https://facebook.github.io/react-native/docs/image.html

Answer 2

Have you tried wrapping it in uri: ?

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

Answer 3

Here is a possible way on how to know if your image will be displayed: copy image uri and paste it to you browser (safari, chrome, etc) -> if you do not see your image, then it probably won't displayed by your phone

Answer 4

just edit list.info file at field: "NSAppTransportSecurity" into ios of React Native such as:

<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
        <key>resizing.flixster.com</key>
        <dict>
            <!--Include to allow subdomains-->
            <key>NSIncludesSubdomains</key>
            <true/>
            <!--Include to allow HTTP requests-->
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <!--Include to specify minimum TLS version-->
            <key>NSTemporaryExceptionMinimumTLSVersion</key>
            <string>TLSv1.1</string>
        </dict>
    </dict>
</dict>

Answer 5

The problem is that your are trying to load the image from a http connection and not from a https connection as it is demanded by apple.
Try if your code works with another uri which uses https instead of http. In Android it should work fine with either http or https.
Read more at https://github.com/facebook/react-native/issues/8520 and http://www.techrepublic.com/article/wwdc-2016-apple-to-require-https-encryption-on-all-ios-apps-by-2017/.

If you really want to load something over http you can edit the info.plist file and add your exception there. More detailed info here https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

See also my stackoverflow question here: React-native loading image over https works while http does not work