react-native: Image from url loads with https but fails loading with http

I am trying to display a simple image from an URL in the iOS Simulator. When the URL is a https domain it works fine but when I try loading from a http domain the image is not loaded. Via the inspector you can see that a blank image was created. My code is the following: render() { return ( <View> <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} // source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} onLoadStart={() => console.warn('loading started')} onLoad={() => console.warn('loading successful')} onLoadEnd={() => console.warn("loading endet (successful or not")} /> </View> ); }

I already tried:

  • Restarting the packager and the iOS simulator (no change)
  • Reset Contents and Settings of the iOS simulator (no change)
  • Tried several other images via http and https
  • Created new project from scratch via react-native init myurltestproject` and added code from above (still not working for http images)

I am using:

  • react-native-cli: 1.0.0
  • react-native: 0.28.0
  • macOS 10.10.5 (Yosemite)
  • MacBook Pro 13inch early 2015

Side note: Interestingly when I try to run the exact same code on the simulator but via Deco IDE (Version 1.1.2 (0.7.0)) http and https url are working.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 2
  • Comments: 16 (4 by maintainers)

Commits related to this issue

Most upvoted comments

Our is not working with https in Android. Can you please tell us how was your working on Android?

Any solution for loading the images over http?

@gitlovenotwar You can add a security exception in Info.plist file. <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>

Reference: https://googleadsdeveloper.blogspot.in/2015/08/handling-app-transport-security-in-ios-9.html

They changed the code of the movie example to use a https url now. See this commit: https://github.com/facebook/react-native/pull/367/commits/b00d4b394f590a3d8365d7a63cf5436c499483ec So now it’s working again also for iOS.

The tutorial is also broken for the IOS simulator, since Rotten tomatoes examples use http

screen shot 2016-07-05 at 6 14 58 pm