Commit dd0169c
Changed files (4)
app/components/application-shell.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { AppRegistry, Text, ListView, View } from 'react-native';
+import ViewContainer from './ViewContainer'
+import StatusBarBackground from './StatusBarBackground'
+import Api from '../services/api'
+
+export default class ApplicationShell extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ dataSource: new ListView.DataSource({
+ rowHasChanged: (row1, row2) => {
+ debugger
+ return row1 != row2;
+ }
+ })
+ };
+ }
+ componentDidMount() {
+ var that = this;
+ var url = 'https://facebook.github.io/react-native/movies.json'
+ new Api(url).get((json) => {
+ that.setState({ dataSource: that.mapAll(json.movies) });
+ });
+ }
+ render() {
+ return (
+ <ViewContainer>
+ <StatusBarBackground style={{backgroundColor: "mistyrose"}} />
+ <ListView
+ dataSource={this.state.dataSource}
+ renderRow={this.renderMovie}
+ />
+ </ViewContainer>
+ );
+ }
+ renderMovie(movie) {
+ return (
+ <View>
+ <Text>{movie.title}</Text>
+ </View>
+ )
+ }
+ mapAll(movies) {
+ return this.state.dataSource.cloneWithRows(movies);
+ }
+}
app/services/api.js
@@ -0,0 +1,13 @@
+export default class Api {
+ constructor(url) {
+ this.url = url;
+ }
+
+ get(success) {
+ fetch(this.url)
+ .then((response) => response.json())
+ .then(success)
+ .done();
+ }
+}
+
index.android.js
@@ -1,63 +1,6 @@
import React, { Component } from 'react';
-import { AppRegistry, StyleSheet, Text, ListView, View } from 'react-native';
-import ViewContainer from './app/components/ViewContainer'
-import StatusBarBackground from './app/components/StatusBarBackground'
-
-const people = [
- { name: 'mo', age: 32 },
- { name: 'allison', age: 33 },
- { name: 'adia', age: 10 },
- { name: 'nailah', age: 7 },
-]
-
-class ApplicationShell extends Component {
- render() {
- return (
- <Navigator
- initialRoute="PeopleIndex"
- ref="appNavigator"
- style={styles.navigatorStyles}
- renderScene={(route, navigator) => { return this._renderScene(route, navigator) }}
- />
- )
- }
- _renderScene(route, navigator) {
- var globalNavigatorProps = { navigator }
- switch(route.ident) {
- case "PeopleIndex":
- return (<PeopleIndexScreen {...globalNavigatorProps} />)
- }
- }
-}
-
-export default class AwesomeProject extends Component {
- constructor(props) {
- super(props)
- let dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2});
- this.state = {
- peopleDataSource: dataSource.cloneWithRows(people)
- };
- }
- render() {
- return (
- <ViewContainer>
- <StatusBarBackground style={{backgroundColor: "mistyrose"}} />
- <ListView
- dataSource={this.state.peopleDataSource}
- renderRow={(person) => { return this._renderPersonRow(person) }}
- />
- </ViewContainer>
- );
- }
-
- _renderPersonRow(person) {
- return (
- <View style={styles.personRow}>
- <Text style={styles.personName}>{person.name}</Text>
- </View>
- )
- }
-}
+import { AppRegistry, StyleSheet } from 'react-native';
+import ApplicationShell from './app/components/application-shell'
const styles = StyleSheet.create({
container: {
@@ -66,11 +9,6 @@ const styles = StyleSheet.create({
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
- personRow: {
-
- },
- personName: {
- }
});
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => ApplicationShell);
movies.json
@@ -0,0 +1,11 @@
+{
+ "title": "The Basics - Networking",
+ "description": "Your app fetched this from a remote endpoint!",
+ "movies": [
+ { "title": "Star Wars", "releaseYear": "1977"},
+ { "title": "Back to the Future", "releaseYear": "1985"},
+ { "title": "The Matrix", "releaseYear": "1999"},
+ { "title": "Inception", "releaseYear": "2010"},
+ { "title": "Interstellar", "releaseYear": "2014"}
+ ]
+}