Last active
May 24, 2017 07:46
-
-
Save JRGould/4145185642279c911115 to your computer and use it in GitHub Desktop.
Deep Thoughts React-Native App v 0.1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* DeepThoughts App v 0.1 | |
*/ | |
'use strict'; | |
var React = require('react-native'); | |
var { | |
AppRegistry, | |
StyleSheet, | |
Text, | |
View, | |
TouchableHighlight, | |
} = React; | |
var MOCKED_DATA = [ | |
{title: 'Deep Thought #1', content: "If there's no 'there' there, where is it and what's there?"}, | |
]; | |
// The URL for the `posts` endpoint provided by WP JSON API | |
var REQUEST_URL = 'http://deep-thoughts.dev/wp-json/wp/v2/posts/'; | |
var DeepThoughts = React.createClass({ | |
getInitialState: function() { | |
return { | |
thought: MOCKED_DATA[0], | |
}; | |
}, | |
// Automatically called by react when this component has finished mounting. | |
componentDidMount: function() { | |
this.fetchData(); | |
}, | |
// This is where the magic happens! Fetches the data from our API and updates the application state. | |
fetchData: function() { | |
fetch(REQUEST_URL) | |
.then((response) => response.json()) | |
.then((responseData) => { | |
// this.setState() will cause the new data to be applied to the UI that is created by the `render` function below | |
this.setState({ | |
thought: { title: responseData[0].title.rendered, content: responseData[0].content.rendered }, | |
}); | |
}) | |
.done(); | |
}, | |
render: function() { | |
return ( | |
<View style={styles.container}> | |
<View style={styles.textContainer}> | |
<Text style={styles.title}> | |
{this.state.thought.title} | |
</Text> | |
<Text style={styles.text}> | |
{this.state.thought.content} | |
</Text> | |
</View> | |
<View style={styles.buttonContainer}> | |
<TouchableHighlight | |
style={styles.button} | |
underlayColor='#ccc' | |
> | |
<Text style={styles.buttonText}>Hmmmmm...</Text> | |
</TouchableHighlight> | |
</View> | |
</View> | |
); | |
} | |
}); | |
var Dimensions = require('Dimensions'); | |
var windowSize = Dimensions.get('window'); | |
var styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
justifyContent: 'center', | |
alignItems: 'center', | |
backgroundColor: '#FFFFFF', | |
}, | |
textContainer: { | |
flex: 1, | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
title: { | |
fontSize: 30, | |
textAlign: 'center', | |
margin: 10, | |
}, | |
text: { | |
fontSize: 18, | |
paddingLeft: 20, | |
paddingRight: 20, | |
textAlign: 'center', | |
color: '#333333', | |
marginBottom: 5, | |
}, | |
buttonContainer: { | |
bottom: 0, | |
flex: .1, | |
width: windowSize.width, | |
backgroundColor: '#eee', | |
}, | |
button: { | |
flex: 1, | |
alignItems: 'center', | |
justifyContent: 'center', | |
}, | |
buttonText: { | |
fontSize: 30, | |
color: '#666666', | |
}, | |
}); | |
AppRegistry.registerComponent('DeepThoughts', () => DeepThoughts); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment