Setup navigation router

app/components/app.js

@@ -0,0 +1,33 @@
+import React from 'react-native';
+
+import RouteMaster from './routes/RouteMaster';
+
+const {
+  Navigator,
+} = React;
+
+export default class extends React.Component {
+  renderScene(route, nav) {
+    const props = route.props || {};
+    return <route.component nav={nav} {...props}/>;
+  }
+
+  componentDidMount() {
+    this.initialRoute = RouteMaster.get('LOGIN');
+  }
+
+  render() {
+    return (
+      <Navigator
+        renderScene={this.renderScene}
+        initialRoute={this.initialRoute}
+        configureScene={(route) => {
+          if (route.sceneConfig) {
+            return route.sceneConfig;
+          }
+          return Navigator.SceneConfigs.PushFromRight;
+        }}
+      />
+    );
+  }
+};

app/components/routes/RouteMaster.js

@@ -0,0 +1,10 @@
+import { Map } from 'immutable';
+
+import Login from './login';
+
+export default Map({
+  'LOGIN': {
+    id: 'login',
+    component: Login
+  }
+});

app/components/routes/login.js

@@ -0,0 +1,86 @@
+import React from 'react-native';
+import Immutable from 'immutable';
+
+import GlobalStyles from '../../settings/styles';
+
+const {
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  TouchableHighlight,
+  ScrollView,
+  BackAndroid
+} = React;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: .5,
+    flexWrap: 'nowrap',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  input: {
+    height: 50,
+    width: 300,
+    borderColor: 'gray',
+    borderWidth: 1
+  },
+  loginButton: {
+    backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
+    margin: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 10
+  },
+  loginButtonText: {
+    fontSize: 16,
+    color: 'white',
+  },
+  title: {
+    fontSize: 25,
+    margin: 13
+  }
+});
+
+export default class Login extends React.Component {
+  constructor() {
+    super();
+    this.state = Immutable.Map({
+      password: '',
+    });
+  }
+
+  validate() {
+
+  }
+
+  componentWillMount() {
+    BackAndroid.addEventListener('hardwareBackPress', () => { return true; });  // Disable back button
+  }
+
+  render() {
+    return (
+      <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
+        <View style={styles.container}>
+          <Text style={styles.title}>
+            Login to continue
+          </Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={(password) => this.state.set('password', password)}
+            value={this.state.get('password')}
+            onSubmitEditing={this.validate}
+            placeholder="Password"
+          />
+        <TouchableHighlight style={styles.loginButton} onPress={this.validate}>
+            <Text style={styles.loginButtonText}>
+              Authenticate
+            </Text>
+          </TouchableHighlight>
+        </View>
+      </ScrollView>
+    );
+  }
+};

app/settings/constants.js

@@ -0,0 +1,8 @@
+import { Map } from 'immutable';
+
+export default Map({
+  PROJECT_DATA: {
+    repository: 'https://github.com/RealOrangeOne/Sphere',
+    CI_Badge: 'https://circleci.com/gh/RealOrangeOne/Sphere.svg?style=svg'
+  }
+});

app/settings/styles.js

@@ -0,0 +1,5 @@
+import { Map } from 'immutable';
+
+export default Map({
+  CIRCLE_BLUE: 'blue'
+});

index.android.js

@@ -1,51 +1,18 @@
-/**
+import React from 'react-native';
- * Sample React Native App
+import App from './app/components/app.js';
- * https://github.com/facebook/react-native
- */
-'use strict';
-import React, {
-  AppRegistry,
-  Component,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
 
-class Sphere extends Component {
+const {
+  AppRegistry,
+} = React;
+
+
+class Sphere extends React.Component {
   render() {
     return (
-      <View style={styles.container}>
+      <App />
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
 
 AppRegistry.registerComponent('Sphere', () => Sphere);

index.ios.js

@@ -1,52 +1,18 @@
-/**
+import React from 'react-native';
- * Sample React Native App
+import App from './app/components/app.js';
- * https://github.com/facebook/react-native
- */
-'use strict';
-import React, {
-  AppRegistry,
-  Component,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
 
-class Sphere extends Component {
+const {
+  AppRegistry,
+} = React;
+
+
+class Sphere extends React.Component {
   render() {
     return (
-      <View style={styles.container}>
+      <App />
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
 
 AppRegistry.registerComponent('Sphere', () => Sphere);