Console warning

[Arnarkari93]

First of all, thank you for this project 🙏

I am getting a console waring in the app for each image.
"Received data was not a string, or was not a recognised encoding"

The only thing I found searching for a the cause of this warning was this issue on react-native facebook/react-native#1780 (comment)

"react-native": "^0.49.5",
"react-native-image-cache-hoc": "^1.4.0",

[billmalarky]

First of all you're welcome!

Can you post some sample code to help me recreate?

I'm wondering if it could be your media servers' response when we use RNFetchBlob to request the image file. What happens if you use imgur or something as the remote image source? Do you still get the error?

[Arnarkari93]

Yeah it must be the strange format of the response of the media server I am working with.
My request has a pretty strange uri (example):
https://example.com/strip/true/crop/2270x1502+0+0/resize/150x99!/quality/90/?url=http%3A%2F%test.com%2F65%2F49%2Fb4cabedd4f87884d33d96ec1712e%2Ftaylor3.jpg

Is like the server is cropping the image on runtime and the path to the original image is set in the query parameter.

Here is an example of the response headers:

Connection      Keep-Alive
Content-Type    image/jpeg
Server          Apache
Etag            <some-id>
Cache-Control   max-age=31536000, public
Expires         Sat, 22 Dec 2018 13:33:40 GMT
Date            Fri, 22 Dec 2017 13:33:40 GMT
Keep-Alive      timeout=305, max=100
Edge-Control    downstream-ttl=31536000
Content-Length  3682

[billmalarky]

Okay to better my understanding of your situation, you were able to get your code to work correctly if you use a different image serving host like imgur or reddit or something right?

Does your server require certain headers to be sent in the image request? Like some sort of basic auth scheme?

[Arnarkari93]

Yes, it worked correctly when I switched the serving host to imgur.

No, the image server doesn't require any specific headers in the request.

[billmalarky]

Can you give me an example url that uses the actual server you will be using? Otherwise there isn't too much I can do to help since this appears to be related to your media server instead of react-native-image-cache-hoc.

From your example above, it looks like you are using some sort of media server that consumes an external image via url, then crops/resizes/whatever on the fly then outputs the final image. If you hit the media server in the browser is it working as expected?

[Arnarkari93]

Hitting the media server in the browser works. But however if you hit the media server specified in the query parameter then you get unauthorised.

Here is an example:
https://qa.md.sothebys.psdops.com/dims4/default/af75a7e/2147483647/strip/true/crop/3264x2448+0+0/resize/150x113!/quality/90/?url=http%3A%2F%2Fsothebys-brightspot-lower.s3.amazonaws.com%2Fb4%2Fd3%2F1c65b5594fe4aad089c5a469a3d8%2Fimg-9904.JPG

[billmalarky]

I've got this working for all the following urls

https://qa.md.sothebys.psdops.com/dims4/default/af75a7e/2147483647/strip/true/crop/3264x2448+0+0/resize/150x113!/quality/90/?url=http%3A%2F%2Fsothebys-brightspot-lower.s3.amazonaws.com%2Fb4%2Fd3%2F1c65b5594fe4aad089c5a469a3d8%2Fimg-9904.JPG

insecure version

http://sothebys-brightspot-lower.s3.amazonaws.com/b4/d3/1c65b5594fe4aad089c5a469a3d8/img-9904.JPG

secure version:

https://sothebys-brightspot-lower.s3.amazonaws.com/b4/d3/1c65b5594fe4aad089c5a469a3d8/img-9904.JPG

NOTE: In order to make calls to http urls on iOS you need to update info.plist (not recommended in production). See https://facebook.github.io/react-native/docs/network.html

By default, iOS will block any request that's not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

I'm going to close this issue, as the issue is unrelated to react-native-image-cache-hoc.

Here is the example App.js file I used to show that react-native-image-cache-hoc is working as expected with the urls listed above. Note that I also updated info.plist to allow iOS to make request to http urls.

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView
} from 'react-native';

import imageCacheHoc from 'react-native-image-cache-hoc';

const CacheableImage = imageCacheHoc(Image, {
  validProtocols: ['http', 'https'],
  cachePruneTriggerLimit: 1024 * 1024 * 1
});

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
  'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <ScrollView style={styles.container}>
  <Text style={styles.welcome}>
    Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
    To get started, edit App.js
    </Text>

  <CacheableImage style={styles.image} source={{uri: 'https://qa.md.sothebys.psdops.com/dims4/default/af75a7e/2147483647/strip/true/crop/3264x2448+0+0/resize/150x113!/quality/90/?url=http%3A%2F%2Fsothebys-brightspot-lower.s3.amazonaws.com%2Fb4%2Fd3%2F1c65b5594fe4aad089c5a469a3d8%2Fimg-9904.JPG'}} />
  <CacheableImage style={styles.image} source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/7/74/Earth_poster_large.jpg'}} />
  <CacheableImage style={styles.image} source={{uri: 'https://sothebys-brightspot-lower.s3.amazonaws.com/b4/d3/1c65b5594fe4aad089c5a469a3d8/img-9904.JPG'}} />
  <CacheableImage style={styles.image} source={{uri: 'http://sothebys-brightspot-lower.s3.amazonaws.com/b4/d3/1c65b5594fe4aad089c5a469a3d8/img-9904.JPG'}} />

  <Text style={styles.instructions}>
    {instructions}
  </Text>
    </ScrollView>
  );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 10
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  image: {
    width:150,
    height: 204
  }
});

info.plist updates:

<key>NSAppTransportSecurity</key>
	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
	<dict>
    <!--Include to allow all connections (DANGER)-->
    <key>NSAllowsArbitraryLoads</key>
        <true/>
  </dict>