sequence select

src/js/native/index.ios.js

@@ -7,13 +7,7 @@
 var React = require('react-native');
 var {
   AppRegistry,
-  Image,
   Navigator,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
 } = React;
 
 var Routes = require('../constants/Routes');
@@ -46,10 +40,4 @@ var LearnGitBranching = React.createClass({
 
 });
 
-var styles = StyleSheet.create({
-  headerSpacer: {
-    height: 40
-  },
-});
-
 AppRegistry.registerComponent('LearnGitBranching', () => LearnGitBranching);

src/js/native_react_views/AppViews.js

@@ -0,0 +1,27 @@
+/**
+ * Simple views for the app that dont really change.
+ */
+
+var React = require('react-native');
+var Routes = require('../constants/Routes');
+var {
+  StyleSheet,
+  View,
+} = React;
+
+var HeaderSpacer = React.createClass({
+
+  render: function() {
+    return <View style={styles.headerSpacer} />;
+  }
+  
+});
+
+var styles = StyleSheet.create({
+  headerSpacer: {
+    height: 20,
+    backgroundColor: '#FFF'
+  },
+});
+
+module.exports.HeaderSpacer = HeaderSpacer;

src/js/native_react_views/NUXView.js

@@ -9,6 +9,10 @@ var {
 } = React;
 
 var AppStyles = require('../constants/AppStyles');
+var AppViews = require('../native_react_views/AppViews');
+var {
+  HeaderSpacer,
+} = AppViews;
 var TerminalCardView = require('../native_react_views/TerminalCardView');
 var NavButton = require('../native_react_views/NavButton');
 
@@ -21,7 +25,7 @@ var NUXView = React.createClass({
   render: function() {
     return (
       <View style={styles.background}>
-        <View style={styles.headerSpacer} />
+        <HeaderSpacer />
         <View style={styles.container}>
           <TerminalCardView>
             <View style={styles.welcomeTextContainer}>
@@ -47,7 +51,7 @@ var NUXView = React.createClass({
               text="Let's Get Started!"
               onPress={() => {
                 this.props.navigator.push(
-                  Routes.getRouteForID(Routes.LEVEL_SELECT)
+                  Routes.getRouteForID(Routes.SEQUENCE_SELECT)
                 );
               }}
             />
@@ -69,10 +73,6 @@ var styles = StyleSheet.create({
   container: {
     padding: 12,
   },
-  headerSpacer: {
-    height: 20,
-    backgroundColor: '#FFF'
-  },
   welcomeTextContainer: {
     justifyContent: 'center',
     alignItems: 'center',

src/js/native_react_views/NavButton.js

@@ -7,6 +7,7 @@ var {
   View,
 } = React;
 
+// TODO -- style this!
 class NavButton extends React.Component {
   render() {
     return (

src/js/native_react_views/SequenceSelectView.js

@@ -9,6 +9,12 @@ var {
 } = React;
 
 var AppStyles = require('../constants/AppStyles');
+var AppViews = require('../native_react_views/AppViews');
+var {
+  HeaderSpacer,
+} = AppViews;
+var TerminalCardView = require('../native_react_views/TerminalCardView');
+var NavButton = require('../native_react_views/NavButton');
 
 var SequenceSelectView = React.createClass({
 
@@ -19,18 +25,21 @@ var SequenceSelectView = React.createClass({
   render: function() {
     return (
       <View style={styles.background}>
-        <View style={styles.headerSpacer} />
+        <HeaderSpacer />
-        <ScrollView>
+        <ScrollView style={styles.container}>
-          <View>
+          <View style={styles.headerSpacer} />
-            <NavButton
+          <TerminalCardView>
-              text="Level 1"
+            <View>
-              onPress={() => {
+              <NavButton
-                this.props.navigator.push(
+                text="Level 1"
-                  Routes.getRouteForID(Routes.LEVEL_SELECT)
+                onPress={() => {
-                );
+                  this.props.navigator.push(
-              }}
+                    Routes.getRouteForID(Routes.LEVEL_SELECT)
-            />
+                  );
-          </View>
+                }}
+              />
+            </View>
+          </TerminalCardView>
         </ScrollView>
       </View>
     );
@@ -39,14 +48,16 @@ var SequenceSelectView = React.createClass({
 });
 
 var styles = StyleSheet.create({
+  container: {
+    padding: 8,
+  },
+  headerSpacer: {
+    height: 24,
+  },
   background: {
     backgroundColor: AppStyles.blueBackground,
     flex: 1
   },
-  headerSpacer: {
-    height: 20,
-    backgroundColor: '#EFEDEE',
-  },
 });
 
 module.exports = SequenceSelectView;