Add input

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>
+
+    )
+  }
+}

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: {
+  container: {
-    flex: 1
+    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 (
+      <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}

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';

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: 'stretch',
-    alignItems: 'center',
+    backgroundColor: '#FFF',
-    backgroundColor: '#F5FCFF',
   } 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>