Skip to content

Instantly share code, notes, and snippets.

@vagmi
Created March 27, 2015 00:01
Show Gist options
  • Save vagmi/16216ec3ac22a07d4dab to your computer and use it in GitHub Desktop.
Save vagmi/16216ec3ac22a07d4dab to your computer and use it in GitHub Desktop.
'use strict';
var React = require("react-native");
var { AppRegistry, StyleSheet, View, Text, ListView } = React;
var REDDIT_URL = "http://www.reddit.com/.json";
var AwesomeProject = React.createClass({
getInitialState : function(){
return {
dataSource : new ListView.DataSource({
rowHasChanged : (row1, row2) => row1 !== row2,
}),
loaded: false,
};
},
componentDidMount : function(){
this.fetchData();
},
fetchData : function(){
fetch(REDDIT_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource : this.state.dataSource.cloneWithRows(
responseData.data.children
),
loaded : false,
});
}).done();
},
render : function(){
if (!this.state.loaded){
return this.renderLoadingView();
}else{
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderPost}
style={styles.listView}
/>
);
}
},
renderLoadingView: function(){
return (
<View style={styles.container}>
<Text>Loading...</Text>
</View>
);
},
renderPost: function(post){
return (
<View style={styles.post}>
<Text style={styles.score}>{post.data.score}</Text>
<Text
style={styles.title}
onPress={this.setPage}>
{post.data.title}
</Text>
</View>
);
},
});
var styles = StyleSheet.create({
container : {
flex: 1,
backgroundColor: '#ecf0f1',
justifyContent: 'center',
alignItems: 'center'
},
post : {
flex : 1,
flexDirection : "row",
backgroundColor : "#ecf0f1",
marginBottom: 10
},
title : {
fontSize : 20,
flex : 8,
color : "#3498db"
},
listView : {
backgroundColor: '#ecf0f1',
},
score : {
flex : 1,
color : "#2ecc71",
alignSelf : "center"
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment