Video 5: Create a List of Items with a React Native ListView.

.gitignore

@@ -8,3 +8,5 @@
 /captures
 /node_modules
 .externalNativeBuild
+/android/build
+/ios/build

.idea/.name

@@ -0,0 +1 @@
+Egghead React Native

.idea/modules.xml

@@ -2,7 +2,7 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/todo.iml" filepath="$PROJECT_DIR$/.idea/todo.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/Egghead React Native.iml" filepath="$PROJECT_DIR$/.idea/Egghead React Native.iml" />
     </modules>
   </component>
 </project>

app.js

@@ -1,5 +1,7 @@
 import React, { Component } from "react";
 import {
+  Keyboard,
+  ListView,
   Platform,
   StyleSheet,
   Text,
@@ -7,6 +9,7 @@ import {
 } from "react-native";
 import Header from "./header";
 import Footer from "./footer";
+import Row from "./row";
 
 const styles = StyleSheet.create({
   container: {
@@ -20,19 +23,31 @@ const styles = StyleSheet.create({
   },
   content: {
     flex: 1
+  },
+  list: {
+    backgroundColor: "#fff"
+  },
+  separator: {
+    borderWidth: 2,
+    borderColor: "#eee"
   }
 });
 
 class App extends Component {
   constructor(props) {
     super(props);
+    const ds = new ListView.DataSource({
+      rowHasChanged: (r1, r2) => r1 !== r2
+    });
     this.state = {
       allComplete: false,
+      dataSource: ds.cloneWithRows([]),
       items: [],
       value: ""
     };
     this.handleAddItem = this.handleAddItem.bind(this);
     this.handleToggleAllComplete = this.handleToggleAllComplete.bind(this);
+    this.setSource = this.setSource.bind(this);
   }
 
   handleAddItem() {
@@ -47,10 +62,7 @@ class App extends Component {
         complete: false
       }
     ];
-    this.setState({
-      items: newItems,
-      value: ""
-    });
+    this.setSource(newItems, newItems, { value: "" });
   }
 
   handleToggleAllComplete() {
@@ -59,15 +71,12 @@ class App extends Component {
       ...item,
       complete
     }));
-    console.table(newItems);
-    this.setState({
-      allComplete: complete,
-      items: newItems
-    });
+    // console.table(newItems);
+    this.setSource(newItems, newItems, { allComplete: complete });
   }
 
   render() {
-    console.log(this.state);
+    // console.log("App state", this.state);
     return (
       <View style={styles.container}>
         <Header
@@ -76,11 +85,39 @@ class App extends Component {
           onToggleAllComplete={this.handleToggleAllComplete}
           value={this.state.value}
         />
-        <View style={styles.content} />
+        <View style={styles.content}>
+          <ListView
+            enableEmptySections
+            dataSource={this.state.dataSource}
+            onScroll={() => Keyboard.dismiss()}
+            renderRow={({ key, ...value }) => {
+              // console.log("renderRow", key, value);
+              return (
+                <Row
+                  key={key}
+                  { ...value }
+                />
+              );
+            }}
+            renderSeparator={(sectionId, rowId) => {
+              // console.log('renderSeparator', sectionId, rowId);
+              return <View key={rowId} style={styles.separator} />;
+            }}
+            style={styles.list}
+          />
+        </View>
         <Footer />
       </View>
     );
   }
+
+  setSource(items, itemsDataSource, otherState = {}) {
+    this.setState({
+      items,
+      dataSource: this.state.dataSource.cloneWithRows(itemsDataSource),
+      ...otherState
+    });
+  }
 }
 
 export default App;

row.js

@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "flex-start",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: 10
+  },
+  text: {
+    color: "#4d4d4d",
+    fontSize: 24
+  }
+});
+
+class Row extends Component {
+  render() {
+    // console.log("Row.render", this.props);
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>{this.props.text}</Text>
+      </View>
+    );
+  }
+}
+
+export default Row;