React Native Android - Image Component (network) - Won't load over https

Question

I'm having trouble loading any image over https. I'm using React Native 0.18, and the implementation is extremely straightforward, example using image at Amazon:

Will work:

<Image style={styles.avatar} source={{uri: "http://ecx.images-amazon.com/images/I/71JxCVQ5ozL.jpg"}} />

Won't work:

<Image style={styles.avatar} source={{uri: "https://images-na.ssl-images-amazon.com/images/I/41KoE8etwlL.jpg"}} />

Has anyone else seen this?

Thanks for your help.

Answer 1

Had a similar issue. Mine was because of the SSL/TSL version used by some sites and their problem with older android OS (TLS v1.2). Images from a particular sites would show on an emulator but wont show on an actual android device.

1. I used Image's onError method to log the actual error. Note that if you use the web debugger you wont see this error.

    onError={e => {
    console.log(e);
    }}
   

2. Viewed the actual error logged on Android Debug Bridge (ADB), The error was:

   "Error: javax.net.ssl.SSLProtocolException: SSL handshake aborted:"

Apparently this is an issue with older android OS.

I followed the link here to resolve the issue with ssl. Works perfectly now

Note that for some versions of React Native, the Image component onError method does not fire on an android device. You can use the polyfill "react-native-android-image-polyfill" from here

• Jacksonkr: In cases like mine I needed to use e.persist(); console.log(e) to combat the synthetic event being released before I could sniff info from it. in e.nativeEvent i found {error: 'Chain validation failed' ... }