Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>  
 );  
}
like image 557
Orlando Avatar asked Jul 01 '16 20:07

Orlando


2 Answers

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/

like image 157
Orlando Avatar answered Oct 10 '22 03:10

Orlando


add in info.plist

<key>NSAppTransportSecurity</key>
 <dict>
 <!--Include to allow all connections (DANGER)-->
    <key>NSAllowsArbitraryLoads</key>
    <true/>
 </dict>
like image 45
Milon Avatar answered Oct 10 '22 04:10

Milon