React-Native Loading Image Over Https Works While Http Does Not Work

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

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/

Image Source URIs with HTTPS (SSL) Work, HTTP do NOT Work (React Native v0.30.0)

1. open ios/YourProject.xcodeproj in xcode
2. open info.plist as Property List
3. Right click on App Transport Security Settings > Add Row
4. Add Allow Arbitrary Loads Boolean and set it to Yes
5. rebuild your app.

Xcode by default blocks all the http request and only allows https request. Because it is the right thing to do.

Here is a blog post about App Transport Security: https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

HTTPS image not rendering in react native image

I tried your code, initially I did not get the image, then I handle the error using onError handler and found the following error

An SSL error has occurred and a secure connection to the server cannot be made

You may look into the stackoverflow answers for this error here

I tried the first solution by changing

info.plist

with following configuration and it worked

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Have a look into this document, above approach is not recommended, instead they have suggested other way (it is also mentioned in the linked stackoverflow answer).

Hope this will help.

React Native Image Not Working with specific URL

Andrés' answer is somewhat correct, but it does not address the exact cause of the problem, and that is iOS' App Transport Security. iOS does not allow plaintext requests (http) by default, and so you need to define a 'whitelist' of URLs that can be allowed to override this particular protection mechanism. You have that list already set up so that your app can connect to localhost during development,, so just add new entries to it. You can see how to do so in this answer. Of course, this only works if you know the list of URLs in advance, which might not suit your needs. In that case, have a look at this article.

How to reload image url one more time if url shows error in loading

Try setting image url in state and update when error on loading image.

product.js

import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';

class Product extends React.Component {
    constructor(props){
     super(props);
     this.state = {
       uri : this.props.product.productImage,
       errorCount : 0
     }
    }

    render() {
        const { productImage } = this.props.product
        return (
            <View>
              <FastImage
                 style={{ width: 200, height: 200, borderWidth: 2, }}
                 source={{ uri:this.state.uri }}
                 resizeMode={FastImage.resizeMode.contain}
                 onError={e =>
                   this.state.errorCount < 3 &&
                   this.setState(
                     {uri: '', errorCount: ++this.state.errorCount},
                       () => this.setState({uri: productImage}),
                   )
                 }
              />
            </View>
        )
    }
}

export default Product;

Can't show Image in React Native

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

Load a local image after loading a remote image failed

Use component' state. In your constructor set initial url:

 this.state = { image: { uri: 'http://example.com/my_image.jpg' } }

Create onError handler:

 onError(error){
   this.setState({ image: require('your_local_image.path')})
 }

And then combine it all together:

 <Image style={ styles.userImage }
       source={ this.state.image }
       onError={ this.onError.bind(this) }
 />

---

Related Topics