[ReactNative] Navigator Example Overhaul

Examples/UIExplorer/Navigator/NavigatorExample.js

@@ -11,6 +11,7 @@
 var React = require('react-native');
 var {
   Navigator,
+  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
@@ -20,30 +21,78 @@ var BreadcrumbNavSample = require('./BreadcrumbNavSample');
 var NavigationBarSample = require('./NavigationBarSample');
 var JumpingNavSample = require('./JumpingNavSample');
 
+class NavButton extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
 class NavMenu extends React.Component {
   render() {
     return (
       <ScrollView style={styles.scene}>
-        <TouchableHighlight style={styles.button} onPress={() => {
-          this.props.navigator.push({ id: 'breadcrumbs' });
-        }}>
-          <Text style={styles.buttonText}>Breadcrumbs Example</Text>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.button} onPress={() => {
-          this.props.navigator.push({ id: 'navbar' });
-        }}>
-          <Text style={styles.buttonText}>Navbar Example</Text>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.button} onPress={() => {
-          this.props.navigator.push({ id: 'jumping' });
-        }}>
-          <Text style={styles.buttonText}>Jumping Example</Text>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.button} onPress={() => {
-          this.props.onExampleExit();
-        }}>
-          <Text style={styles.buttonText}>Exit Navigator Example</Text>
-        </TouchableHighlight>
+        <Text style={styles.messageText}>{this.props.message}</Text>
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({
+              message: 'Swipe right to dismiss',
+              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
+            });
+          }}
+          text="Float in from right"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({
+              message: 'Swipe down to dismiss',
+              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
+            });
+          }}
+          text="Float in from bottom"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.pop();
+          }}
+          text="Pop"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.popToTop();
+          }}
+          text="Pop to top"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({ id: 'navbar' });
+          }}
+          text="Navbar Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({ id: 'jumping' });
+          }}
+          text="Jumping Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({ id: 'breadcrumbs' });
+          }}
+          text="Breadcrumbs Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.onExampleExit();
+          }}
+          text="Exit <Navigator> Example"
+        />
       </ScrollView>
     );
   }
@@ -58,19 +107,20 @@ var TabBarExample = React.createClass({
 
   renderScene: function(route, nav) {
     switch (route.id) {
-      case 'menu':
+      case 'navbar':
+        return <NavigationBarSample navigator={nav} />;
+      case 'breadcrumbs':
+        return <BreadcrumbNavSample navigator={nav} />;
+      case 'jumping':
+        return <JumpingNavSample navigator={nav} />;
+      default:
         return (
           <NavMenu
+            message={route.message}
             navigator={nav}
             onExampleExit={this.props.onExampleExit}
           />
         );
-      case 'navbar':
-        return <NavigationBarSample />;
-      case 'breadcrumbs':
-        return <BreadcrumbNavSample />;
-      case 'jumping':
-        return <JumpingNavSample />;
     }
   },
 
@@ -78,9 +128,14 @@ var TabBarExample = React.createClass({
     return (
       <Navigator
         style={styles.container}
-        initialRoute={{ id: 'menu', }}
+        initialRoute={{ message: "First Scene", }}
         renderScene={this.renderScene}
-        configureScene={(route) => Navigator.SceneConfigs.FloatFromBottom}
+        configureScene={(route) => {
+          if (route.sceneConfig) {
+            return route.sceneConfig;
+          }
+          return Navigator.SceneConfigs.FloatFromBottom;
+        }}
       />
     );
   },
@@ -88,18 +143,30 @@ var TabBarExample = React.createClass({
 });
 
 var styles = StyleSheet.create({
+  messageText: {
+    fontSize: 17,
+    fontWeight: '500',
+    padding: 15,
+    marginTop: 50,
+    marginLeft: 15,
+  },
   container: {
     flex: 1,
   },
   button: {
     backgroundColor: 'white',
     padding: 15,
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: '#CDCDCD',
   },
   buttonText: {
+    fontSize: 17,
+    fontWeight: '500',
   },
   scene: {
     flex: 1,
-    paddingTop: 64,
+    paddingTop: 20,
+    backgroundColor: '#EAEAEA',
   }
 });