React-native loading image over https works while http does not work

Question

I want to load an Image in the iOS simulator over a http uri as source. But nothing is shown on the screen expect the wireframe which can be made visible with the inspector. If you load the same code in Android it works fine and if you use a https uri instead of http it also works fine.

Example code:

render() { 
  return ( 
   <View> 
     <Image 
       source={{uri:https://facebook.github.io/react/img/logo_og.png'}} // works  
    // source={{uri: http://facebook.github.io/react/img/logo_og.png'}}  // doesn't work
       style={{width: 400, height: 400}}   
     />   
  </View>  
 );  
}

Answer 1

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/

Answer 2

add in info.plist

<key>NSAppTransportSecurity</key>
 <dict>
 <!--Include to allow all connections (DANGER)-->
    <key>NSAllowsArbitraryLoads</key>
    <true/>
 </dict>