Followed instructions, but example only shows blank screen
with0out opened this issue · 1 comments
with0out commented
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.