Commit befaf31

mo khan <mo@mokhan.ca>
2016-11-24 01:36:45
load ListView of movies.
1 parent dd0169c
Changed files (2)
app/components/application-shell.js
@@ -1,48 +1,50 @@
 import React, { Component } from 'react';
-import { AppRegistry, Text, ListView, View } from 'react-native';
+import { AppRegistry, Text, ListView, View, Image, TextInput } from 'react-native';
 import ViewContainer from './ViewContainer'
 import StatusBarBackground from './StatusBarBackground'
 import Api from '../services/api'
+import Movie from './movie'
 
 export default class ApplicationShell extends Component {
   constructor(props) {
     super(props)
-
+    this.ds = new ListView.DataSource({ rowHasChanged: (row, other) => row['title'] != other['title'] });
     this.state = {
-      dataSource: new ListView.DataSource({
-        rowHasChanged: (row1, row2) => {
-          debugger
-          return row1 != row2;
-        }
-      })
+      dataSource: this.mapAll([]),
+      showText: true,
+      text: 'WAT?',
     };
   }
+
   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) });
     });
+    setInterval(() => {
+      that.setState({ showText: !that.state.showText });
+    }, 1000);
   }
+
   render() {
+    let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' };
+    let display = this.state.showText ? this.props.text : ' ';
+
     return (
-      <ViewContainer>
-        <StatusBarBackground style={{backgroundColor: "mistyrose"}} />
+      <View style={{flex: 1, alignItems: 'center'}}>
+        <Image source={pic} style={{width: 193, height: 110}} />
+        <Text>{display}</Text>
         <ListView
           dataSource={this.state.dataSource}
-          renderRow={this.renderMovie}
-        />
-      </ViewContainer>
-    );
-  }
-  renderMovie(movie) {
-    return (
-      <View>
-        <Text>{movie.title}</Text>
+          renderRow={(row) => <Movie name={row} />}
+          />
       </View>
-    )
+    );
   }
+
   mapAll(movies) {
-    return this.state.dataSource.cloneWithRows(movies);
+    movies.forEach((item) => console.log(item))
+    return this.ds.cloneWithRows(movies.map((item) => item.title));
   }
 }
app/components/movie.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+
+export default class Movie extends Component {
+  render() {
+    return (
+      <Text style={{flex: 1}}>{this.props.name}</Text>
+    )
+  }
+}