oblador/react-native-image-progress

Followed instructions, but example only shows blank screen

with0out opened this issue · 1 comments

I followed the instructions to install react-native-progress, and tested with the examples, it displays normally.
But when I copy the code in this repo's example folder to the project created with "react-native init",
run-ios only displays a blank screen, no error.

My package.json:

{
	"name": "ReactNativeImageProgress",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest"
	},
	"dependencies": {
		"react": "16.0.0-alpha.12",
		"react-native": "0.46.1",
		"react-native-image-progress": "^1.0.1",
		"react-native-progress": "^3.3.0"
	},
	"devDependencies": {
		"babel-jest": "20.0.3",
		"babel-preset-react-native": "2.1.0",
		"jest": "20.0.4",
		"react-test-renderer": "16.0.0-alpha.12"
	},
	"jest": {
		"preset": "react-native"
	}
}

My index.ios.js:

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, View, AppRegistry } from 'react-native';

import Image from 'react-native-image-progress';
import * as Progress from 'react-native-progress';

const INDICATORS = [null, Progress.Bar, Progress.Circle, Progress.Pie];

const IMAGES = [
  'http://www.savethecat.com/wp-content/uploads/2015/06/cats.jpg',
  'http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg',
  'http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg',
  'http://media1.santabanta.com/full1/Animals/Cats/cats-87a.jpg',
  'http://awesomegifs.com/wp-content/uploads/cat-smacks-at-hands.gif',
];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: 300,
    height: 200,
  },
});

const pseudoRandom = () => 0.5 - Math.random();

const getRandomIndicator = () => INDICATORS.slice(0).sort(pseudoRandom)[0];

const getRandomImage = excludeUri => {
  const imageUrl = IMAGES.filter(
    uri => !excludeUri || excludeUri.indexOf(uri) !== 0,
  ).sort(pseudoRandom)[0];
  return `${imageUrl}?rand=${Date.now()}`;
};

const getRandomState = excludeUri => ({
  imageUri: getRandomImage(excludeUri),
  indicator: getRandomIndicator(),
});

export default class ReactNativeImageProgress extends Component {
  constructor(props) {
    super(props);
    this.state = getRandomState();
  }

  randomize = () => {
    this.setState(getRandomState(this.state.imageUri));
  };

  render() {
    console.log(this.state);
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.randomize}>
          <Image
            key={this.state.imageUri}
            source={{ uri: this.state.imageUri }}
            indicator={this.state.indicator}
            style={styles.image}
            onLoaded={() => console.log('Image was loaded!')}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

AppRegistry.registerComponent('ReactNativeImageProgress', () => ReactNativeImageProgress);

I tried to clone this repo, and yarn inside example folder, run-ios inside it works just fine, strange.

To anyone else who has this same issue. It's likely because the app is configured to block all access over http except for localhost.

Switching my image source to https solved this.

Source