Video 3: add a native TextInput.

app.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import { View, Text, StyleSheet, Platform } from 'react-native';
+import { View, Text, StyleSheet, Platform } from "react-native";
-import Header from './header';
+import Header from "./header";
-import Footer from './footer';
+import Footer from "./footer";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#FF6633",
+    backgroundColor: "#F5F5F5",
     ...Platform.select({
       ios: {
         paddingTop: 30
@@ -19,13 +19,43 @@ const styles = StyleSheet.create({
 });
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: "",
+      items: []
+    };
+    this.handleAddItem = this.handleAddItem.bind(this);
+  }
+
+  handleAddItem() {
+    if (!this.state.value) {
+      return;
+    }
+    const newItems = [
+      ...this.state.items,
+      {
+        key: Date.now(),
+        text: this.state.value,
+        complete: false
+      }
+    ];
+    this.setState({
+      items: newItems,
+      value: ""
+    });
+  }
+
   render() {
+    console.log(this.state);
     return (
       <View style={styles.container}>
-        <Header />
+        <Header
-        <View style={styles.content}>
+          onAddItem={this.handleAddItem}
-          <Text>Some other text</Text>
+          onChange={(value) => this.setState({ value })}
-        </View>
+          value={this.state.value}
+        />
+        <View style={styles.content} />
         <Footer />
       </View>
     );

header.js

@@ -1,10 +1,38 @@
 import React, { Component } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  View
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  header: {
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center"
+  },
+  input: {
+    flex: 1,
+    height: 50
+  }
+});
 
 class Header extends Component {
   render() {
     return (
-      <View />
+      <View style={styles.header}>
+        <TextInput
+          blurOnSubmit={false}
+          onChangeText={this.props.onChange}
+          onSubmitEditing={this.props.onAddItem}
+          placeholder="What needs to be done?"
+          returnKeyType="done"
+          style={styles.input}
+          value={this.props.value}
+        />
+      </View>
     );
   }
 }