From 8ebb47f40c2b9c0c7ec74a6d799bc321519417ea Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sat, 17 Sep 2016 22:00:18 +0100
Subject: [PATCH] Add input

---
 src/components/Input.tsx | 58 ++++++++++++++++++++++++++++++++++++++++
 src/index.tsx            | 25 ++++++++++-------
 src/settings/styles.ts   |  5 ++++
 src/views/main.tsx       | 10 ++++---
 4 files changed, 85 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Input.tsx

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..136a57a
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,58 @@
+import React, { Component }from 'react';
+
+import { TextInput, View, StyleSheet } from 'react-native';
+import { BRAND_PRIMARY } from '../settings/styles';
+
+
+const styles = StyleSheet.create({
+    inputBorder: {
+      borderWidth: 1,
+      borderColor: BRAND_PRIMARY,
+      borderStyle: 'solid',
+      borderRadius: 7,
+      margin: 20
+    } as React.ViewStyle,
+
+    input: {
+      height: 40,
+      fontSize: 14,
+      color: '#000',
+      textAlign: 'center',
+    } as React.TextStyle
+});
+
+interface State {
+  value: string
+}
+
+export default class Input extends Component<any, State> {
+  constructor() {
+    super();
+    this.state = {
+      value: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value : string) {
+    this.setState({ value });
+  }
+
+  render() {
+    return (
+      <View style={styles.inputBorder}>
+        <TextInput
+          style={styles.input}
+          value={this.state.value}
+          onChangeText={this.handleChange}
+          autoCapitalize="none"
+          underlineColorAndroid="transparent"
+          returnKeyType="done"
+          autoCorrect={false}
+          blurOnSubmit
+          enablesReturnKeyAutomatically />
+      </View>
+
+    )
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
index b62f4fc..e96d64d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,19 +5,24 @@ import {
   Navigator,
   StyleSheet
 } from 'react-native';
+import './types';
+
 import Routes from './navigation/Routes';
 import RouteMapper from './navigation/RouteMapper';
-import './types';
+import { NAVBAR_HEIGHT } from './settings/styles';
 
 
 const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1
+  container: {
+    flex: 1,
   } as React.ViewStyle,
   navbar: {
     flexDirection: 'row',
     justifyContent: 'center',
-    backgroundColor: '#888'
+    backgroundColor: '#FFF'
+  } as React.ViewStyle,
+  wrapper: {
+    marginTop: NAVBAR_HEIGHT
   } as React.ViewStyle
 });
 
@@ -26,16 +31,18 @@ export default class App extends Component<any, any> {
     const Component = route.component;
     const props = route.props || {};
     return (
-      <Component
-        nav={nav}
-        currentRoute={route}
-        {...props} />
+      <View style={styles.wrapper}>
+        <Component
+          nav={nav}
+          currentRoute={route}
+          {...props} />
+      </View>
     );
   }
 
   render() {
     return (
-      <View style={styles.wrapper}>
+      <View style={styles.container}>
         <Navigator
           renderScene={this.renderScene}
           initialRoute={Routes.main}
diff --git a/src/settings/styles.ts b/src/settings/styles.ts
index e69de29..26f1463 100644
--- a/src/settings/styles.ts
+++ b/src/settings/styles.ts
@@ -0,0 +1,5 @@
+import { Platform } from 'react-native';
+
+export const NAVBAR_HEIGHT = (Platform.OS === 'ios' ? 64 : 56);
+export const BRAND_PRIMARY = '#1081DE';
+export const BRAND_PRIMARY_LIGHT = '#70B1E8';
diff --git a/src/views/main.tsx b/src/views/main.tsx
index 3e1dffd..2b8bf19 100644
--- a/src/views/main.tsx
+++ b/src/views/main.tsx
@@ -4,26 +4,28 @@ import {
     Text,
     View
 } from 'react-native';
+import Input from '../components/Input';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+    alignItems: 'stretch',
+    backgroundColor: '#FFF',
   } as React.ViewStyle,
 
   text: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
-  } as React.TextStyle,
+  } as React.TextStyle
 });
 
+
 export default class App extends Component<any, any> {
   render() {
     return (
       <View style={styles.container}>
+        <Input />
         <Text style={styles.text}>
           Welcome to React Native!
         </Text>