From 2448946a7e438388fbdc3cc9a873c427749e0412 Mon Sep 17 00:00:00 2001
From: Eric Vicenti <evv@fb.com>
Date: Thu, 26 Mar 2015 06:08:03 -0700
Subject: [PATCH] [ReactNative] Navigator Example Overhaul

---
 .../Navigator/BreadcrumbNavSample.js          | 294 ++++++------------
 .../UIExplorer/Navigator/JumpingNavSample.js  | 266 ++++++++--------
 .../Navigator/NavigationBarSample.js          | 114 +++++--
 .../UIExplorer/Navigator/NavigatorExample.js  | 127 ++++++--
 4 files changed, 407 insertions(+), 394 deletions(-)

diff --git a/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js b/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
index 0734dff41e..af37490a65 100644
--- a/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
+++ b/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
@@ -10,245 +10,133 @@
 
 var React = require('react-native');
 var {
+  PixelRatio,
   Navigator,
-  ScrollView,
   StyleSheet,
-  TabBarIOS,
+  ScrollView,
   Text,
-  View,
   TouchableHighlight,
+  TouchableOpacity,
+  View,
 } = React;
 
-var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
-
 var _getRandomRoute = function() {
   return {
-    backButtonTitle: 'Back' + ('' + 10 * Math.random()).substr(0, 1),
-    content:
-      SAMPLE_TEXT + '\nHere\'s a random number ' + Math.random(),
-    title: Math.random() > 0.5 ? 'Hello' : 'There',
-    rightButtonTitle: Math.random() > 0.5 ? 'Right' : 'Button',
+    title: '#' + Math.ceil(Math.random() * 1000),
   };
 };
 
-
-var SampleNavigationBarRouteMapper = {
-  rightContentForRoute: function(route, navigator) {
-    if (route.rightButtonTitle) {
-      return (
-        <Text style={[styles.titleText, styles.filterText]}>
-          {route.rightButtonTitle}
-        </Text>
-      );
-    } else {
-      return null;
-    }
-  },
-  titleContentForRoute: function(route, navigator) {
+class NavButton extends React.Component {
+  render() {
     return (
       <TouchableHighlight
-        onPress={() => navigator.push(_getRandomRoute())}>
-        <View>
-          <Text style={styles.titleText}>{route.title}</Text>
-        </View>
-      </TouchableHighlight>
-    );
-  },
-  iconForRoute: function(route, navigator) {
-    var onPress =
-      navigator.popToRoute.bind(navigator, route);
-    return (
-      <TouchableHighlight onPress={onPress}>
-        <View style={styles.crumbIconPlaceholder} />
-      </TouchableHighlight>
-    );
-  },
-  separatorForRoute: function(route, navigator) {
-    return (
-      <TouchableHighlight onPress={navigator.pop}>
-        <View style={styles.crumbSeparatorPlaceholder} />
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
       </TouchableHighlight>
     );
   }
-};
-
-var _delay = 400; // Just to test for race conditions with native nav.
-
-var renderScene = function(route, navigator) {
-  var content = route.content;
-  return (
-    <ScrollView>
-      <View style={styles.scene}>
-        <TouchableHighlight
-          onPress={_pushRouteLater(navigator.push)}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>request push soon</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight
-          onPress={_pushRouteLater(navigator.replace)}>
-          <View style={styles.button}>
-            <Text>{content}</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight
-          onPress={_pushRouteLater(navigator.replace)}>
-          <View style={styles.button}>
-            <Text>{content}</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight
-          onPress={_pushRouteLater(navigator.replace)}>
-          <View style={styles.button}>
-            <Text>{content}</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight
-          onPress={_pushRouteLater(navigator.replace)}>
-          <View style={styles.button}>
-            <Text>{content}</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight
-          onPress={_pushRouteLater(navigator.replace)}>
-          <View style={styles.button}>
-            <Text>{content}</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight
-          onPress={_popRouteLater(navigator.pop)}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>request pop soon</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight
-          onPress={
-            _immediatelySetTwoItemsLater(
-              navigator.immediatelyResetRouteStack
-            )
-          }>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>Immediate set two routes</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight
-          onPress={_popToTopLater(navigator.popToTop)}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>pop to top soon</Text>
-          </View>
-        </TouchableHighlight>
-      </View>
-    </ScrollView>
-  );
-};
-
-var _popToTopLater = function(popToTop) {
-  return () => setTimeout(popToTop, _delay);
-};
-
-var _pushRouteLater = function(push) {
-  return () => setTimeout(
-    () => push(_getRandomRoute()),
-    _delay
-  );
-};
-
-var _immediatelySetTwoItemsLater = function(immediatelyResetRouteStack) {
-  return () => setTimeout(
-    () => immediatelyResetRouteStack([
-      _getRandomRoute(),
-      _getRandomRoute(),
-    ])
-  );
-};
-
-var _popRouteLater = function(pop) {
-  return () => setTimeout(pop, _delay);
-};
+}
 
 var BreadcrumbNavSample = React.createClass({
 
-  getInitialState: function() {
-    return {
-      selectedTab: 0,
+  componentWillMount: function() {
+    this._navBarRouteMapper = {
+      rightContentForRoute: function(route, navigator) {
+        return null;
+      },
+      titleContentForRoute: function(route, navigator) {
+        return (
+          <TouchableOpacity
+            onPress={() => navigator.push(_getRandomRoute())}>
+            <View>
+              <Text style={styles.titleText}>{route.title}</Text>
+            </View>
+          </TouchableOpacity>
+        );
+      },
+      iconForRoute: function(route, navigator) {
+        return (
+          <TouchableOpacity onPress={() => {
+            navigator.popToRoute(route);
+          }}>
+            <View style={styles.crumbIconPlaceholder} />
+          </TouchableOpacity>
+        );
+      },
+      separatorForRoute: function(route, navigator) {
+        return (
+          <TouchableOpacity onPress={navigator.pop}>
+            <View style={styles.crumbSeparatorPlaceholder} />
+          </TouchableOpacity>
+        );
+      }
     };
   },
 
-  render: function() {
-    var initialRoute = {
-      backButtonTitle: 'Start', // no back button for initial scene
-      content: SAMPLE_TEXT,
-      title: 'Campaigns',
-      rightButtonTitle: 'Filter',
-    };
+  _renderScene: function(route, navigator) {
     return (
-      <TabBarIOS>
-        <TabBarIOS.Item
-          selected={this.state.selectedTab === 0}
-          onPress={this.onTabSelect.bind(this, 0)}
-          icon={require('image!tabnav_list')}
-          title="One">
-          <Navigator
-            debugOverlay={false}
-            style={[styles.appContainer]}
-            initialRoute={initialRoute}
-            renderScene={renderScene}
-            navigationBar={
-              <Navigator.BreadcrumbNavigationBar
-                navigationBarRouteMapper={SampleNavigationBarRouteMapper}
-              />
-            }
-          />
-        </TabBarIOS.Item>
-        <TabBarIOS.Item
-          selected={this.state.selectedTab === 1}
-          onPress={this.onTabSelect.bind(this, 1)}
-          icon={require('image!tabnav_notification')}
-          title="Two">
-          <Navigator
-            configureScene={() => Navigator.SceneConfigs.FloatFromBottom}
-            debugOverlay={false}
-            style={[styles.appContainer]}
-            initialRoute={initialRoute}
-            renderScene={renderScene}
-            navigationBar={
-              <Navigator.BreadcrumbNavigationBar
-                navigationBarRouteMapper={SampleNavigationBarRouteMapper}
-              />
-            }
-          />
-        </TabBarIOS.Item>
-      </TabBarIOS>
+      <ScrollView style={styles.scene}>
+        <NavButton
+          onPress={() => { navigator.push(_getRandomRoute()) }}
+          text="Push"
+        />
+        <NavButton
+          onPress={() => { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]) }}
+          text="Reset w/ 2 scenes"
+        />
+        <NavButton
+          onPress={() => { navigator.popToTop() }}
+          text="Pop to top"
+        />
+        <NavButton
+          onPress={() => { navigator.replace(_getRandomRoute()) }}
+          text="Replace"
+        />
+        <NavButton
+          onPress={() => { this.props.navigator.pop(); }}
+          text="Close breadcrumb example"
+        />
+      </ScrollView>
     );
   },
 
-  onTabSelect: function(tab, event) {
-    if (this.state.selectedTab !== tab) {
-      this.setState({selectedTab: tab});
-    }
+  render: function() {
+    return (
+      <Navigator
+        style={styles.container}
+        initialRoute={_getRandomRoute()}
+        renderScene={this._renderScene}
+        navigationBar={
+          <Navigator.BreadcrumbNavigationBar
+            navigationBarRouteMapper={this._navBarRouteMapper}
+          />
+        }
+      />
+    );
   },
 
+
+
 });
 
 var styles = StyleSheet.create({
-  navigationItem: {
-    backgroundColor: '#eeeeee',
-  },
   scene: {
     paddingTop: 50,
     flex: 1,
   },
   button: {
-    backgroundColor: '#cccccc',
-    margin: 50,
-    marginTop: 26,
-    padding: 10,
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: '#CDCDCD',
   },
   buttonText: {
-    fontSize: 12,
-    textAlign: 'center',
+    fontSize: 17,
+    fontWeight: '500',
   },
-  appContainer: {
+  container: {
     overflow: 'hidden',
     backgroundColor: '#dddddd',
     flex: 1,
@@ -257,13 +145,9 @@ var styles = StyleSheet.create({
     fontSize: 18,
     color: '#666666',
     textAlign: 'center',
-    fontWeight: '500',
+    fontWeight: 'bold',
     lineHeight: 32,
   },
-  filterText: {
-    color: '#5577ff',
-  },
-  // TODO: Accept icons from route.
   crumbIconPlaceholder: {
     flex: 1,
     backgroundColor: '#666666',
diff --git a/Examples/UIExplorer/Navigator/JumpingNavSample.js b/Examples/UIExplorer/Navigator/JumpingNavSample.js
index fa3d72b0d7..1a94791034 100644
--- a/Examples/UIExplorer/Navigator/JumpingNavSample.js
+++ b/Examples/UIExplorer/Navigator/JumpingNavSample.js
@@ -11,8 +11,10 @@
 var React = require('react-native');
 var {
   Navigator,
+  PixelRatio,
   StyleSheet,
   ScrollView,
+  TabBarIOS,
   Text,
   TouchableHighlight,
   View,
@@ -20,178 +22,186 @@ var {
 
 var _getRandomRoute = function() {
   return {
-    randNumber: Math.random(),
+    randNumber: Math.ceil(Math.random() * 1000),
   };
 };
 
-var INIT_ROUTE = _getRandomRoute();
+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>
+    );
+  }
+}
+
 var ROUTE_STACK = [
   _getRandomRoute(),
   _getRandomRoute(),
-  INIT_ROUTE,
-  _getRandomRoute(),
   _getRandomRoute(),
 ];
-var renderScene = function(route, navigator) {
-  return (
-    <ScrollView style={styles.scene}>
-      <View style={styles.scroll}>
-      <Text>{route.randNumber}</Text>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.jumpBack();
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>jumpBack</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.jumpForward();
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>jumpForward</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.jumpTo(INIT_ROUTE);
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>jumpTo initial route</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.push(_getRandomRoute());
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: push</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.replace(_getRandomRoute());
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: replace</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.pop();
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: pop</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() =>  {
-          navigator.immediatelyResetRouteStack([
-            _getRandomRoute(),
-            _getRandomRoute(),
-          ]);
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: Immediate set two routes</Text>
-        </View>
-      </TouchableHighlight>
-      <TouchableHighlight
-        onPress={() => {
-          navigator.popToTop();
-        }}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>destructive: pop to top</Text>
-        </View>
-      </TouchableHighlight>
-    </View>
-    </ScrollView>
-  );
-};
+var INIT_ROUTE_INDEX = 1;
 
 class JumpingNavBar extends React.Component {
   render() {
     return (
-      <View style={styles.navBar}>
-        {this.props.routeStack.map((route, index) => (
-          <TouchableHighlight onPress={() => {
-            this.props.navigator.jumpTo(route);
-          }}>
-            <View style={styles.navButton}>
-              <Text
-                style={[
-                  styles.navButtonText,
-                  this.props.navState.toIndex === index && styles.navButtonActive
-                ]}>
-                  {index}
-                </Text>
-            </View>
-          </TouchableHighlight>
-        ))}
+      <View style={styles.tabs}>
+        <TabBarIOS
+          selectedTab={'tab_' + this.props.tabIndex}>
+          <TabBarIOS.Item
+            name="tab_0"
+            icon={require('image!tabnav_notification')}
+            selected={this.props.tabIndex === 0}
+            onPress={() => { this.props.onTabIndex(0); }}
+            children={<View />}
+          />
+          <TabBarIOS.Item
+            name="tab_1"
+            icon={require('image!tabnav_list')}
+            selected={this.props.tabIndex === 1}
+            onPress={() => { this.props.onTabIndex(1); }}
+            children={<View />}
+          />
+          <TabBarIOS.Item
+            name="tab_2"
+            icon={require('image!tabnav_settings')}
+            selected={this.props.tabIndex === 2}
+            onPress={() => { this.props.onTabIndex(2); }}
+            children={<View />}
+          />
+        </TabBarIOS>
       </View>
     );
   }
 }
 
 var JumpingNavSample = React.createClass({
+  getInitialState: function() {
+    return {
+      tabIndex: INIT_ROUTE_INDEX,
+    };
+  },
 
   render: function() {
     return (
       <Navigator
         debugOverlay={false}
-        style={[styles.appContainer]}
-        initialRoute={INIT_ROUTE}
+        style={styles.appContainer}
+        ref={(navigator) => {
+          this._navigator = navigator;
+        }}
+        initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
         initialRouteStack={ROUTE_STACK}
-        renderScene={renderScene}
-        navigationBar={<JumpingNavBar routeStack={ROUTE_STACK} />}
+        renderScene={this.renderScene}
+        navigationBar={
+          <JumpingNavBar
+            routeStack={ROUTE_STACK}
+            tabIndex={this.state.tabIndex}
+            onTabIndex={(index) => {
+              this.setState({ tabIndex: index }, () => {
+                this._navigator.jumpTo(ROUTE_STACK[index]);
+              });
+            }}
+          />
+        }
+        onWillFocus={(route) => {
+          this.setState({
+            tabIndex: ROUTE_STACK.indexOf(route),
+          });
+        }}
         shouldJumpOnBackstackPop={true}
       />
     );
   },
 
+  renderScene: function(route, navigator) {
+    var backBtn;
+    var forwardBtn;
+    if (ROUTE_STACK.indexOf(route) !== 0) {
+      backBtn = (
+        <NavButton
+          onPress={() => {
+            navigator.jumpBack();
+          }}
+          text="jumpBack"
+        />
+      );
+    }
+    if (ROUTE_STACK.indexOf(route) !== ROUTE_STACK.length - 1) {
+      forwardBtn = (
+        <NavButton
+          onPress={() => {
+            navigator.jumpForward();
+          }}
+          text="jumpForward"
+        />
+      );
+    }
+    return (
+      <ScrollView style={styles.scene}>
+        <Text style={styles.messageText}>#{route.randNumber}</Text>
+        {backBtn}
+        {forwardBtn}
+        <NavButton
+          onPress={() => {
+            navigator.jumpTo(ROUTE_STACK[1]);
+          }}
+          text="jumpTo middle route"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.pop();
+          }}
+          text="Exit Navigation Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({
+              message: 'Came from jumping example',
+            });
+          }}
+          text="Nav Menu"
+        />
+      </ScrollView>
+    );
+  },
 });
 
 var styles = StyleSheet.create({
-  scene: {
-    backgroundColor: '#eeeeee',
-  },
-  scroll: {
-    flex: 1,
-  },
   button: {
-    backgroundColor: '#cccccc',
-    margin: 50,
-    marginTop: 26,
-    padding: 10,
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: '#CDCDCD',
   },
   buttonText: {
-    fontSize: 12,
-    textAlign: 'center',
+    fontSize: 17,
+    fontWeight: '500',
   },
   appContainer: {
     overflow: 'hidden',
     backgroundColor: '#dddddd',
     flex: 1,
   },
-  navBar: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: 90,
-    flexDirection: 'row',
+  messageText: {
+    fontSize: 17,
+    fontWeight: '500',
+    padding: 15,
+    marginTop: 50,
+    marginLeft: 15,
   },
-  navButton: {
+  scene: {
     flex: 1,
+    paddingTop: 20,
+    backgroundColor: '#EAEAEA',
   },
-  navButtonText: {
-    textAlign: 'center',
-    fontSize: 32,
-    marginTop: 25,
-  },
-  navButtonActive: {
-    color: 'green',
-  },
+  tabs: {
+    height: 50,
+  }
 });
 
 module.exports = JumpingNavSample;
diff --git a/Examples/UIExplorer/Navigator/NavigationBarSample.js b/Examples/UIExplorer/Navigator/NavigationBarSample.js
index cba58aabce..6013f49754 100644
--- a/Examples/UIExplorer/Navigator/NavigationBarSample.js
+++ b/Examples/UIExplorer/Navigator/NavigationBarSample.js
@@ -11,15 +11,30 @@
 
 var React = require('react-native');
 var {
+  PixelRatio,
   Navigator,
+  ScrollView,
   StyleSheet,
   Text,
   TouchableHighlight,
+  TouchableOpacity,
   View,
 } = React;
 
 var cssVar = require('cssVar');
 
+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>
+    );
+  }
+}
 
 var NavigationBarRouteMapper = {
 
@@ -30,26 +45,27 @@ var NavigationBarRouteMapper = {
 
     var previousRoute = navState.routeStack[index - 1];
     return (
-      <TouchableHighlight onPress={() => navigator.pop()}>
-        <View>
+      <TouchableOpacity
+        onPress={() => navigator.pop()}>
+        <View style={styles.navBarLeftButton}>
           <Text style={[styles.navBarText, styles.navBarButtonText]}>
             {previousRoute.title}
           </Text>
         </View>
-      </TouchableHighlight>
+      </TouchableOpacity>
     );
   },
 
   RightButton: function(route, navigator, index, navState) {
     return (
-      <TouchableHighlight
+      <TouchableOpacity
         onPress={() => navigator.push(newRandomRoute())}>
-        <View>
+        <View style={styles.navBarRightButton}>
           <Text style={[styles.navBarText, styles.navBarButtonText]}>
             Next
           </Text>
         </View>
-      </TouchableHighlight>
+      </TouchableOpacity>
     );
   },
 
@@ -65,8 +81,7 @@ var NavigationBarRouteMapper = {
 
 function newRandomRoute() {
   return {
-    content: 'Hello World!',
-    title: 'Random ' + Math.round(Math.random() * 100),
+    title: '#' + Math.ceil(Math.random() * 1000),
   };
 }
 
@@ -74,37 +89,63 @@ var NavigationBarSample = React.createClass({
 
   render: function() {
     return (
-      <View style={styles.appContainer}>
-        <Navigator
-          debugOverlay={false}
-          style={styles.appContainer}
-          initialRoute={newRandomRoute()}
-          renderScene={(route, navigator) => (
-            <View style={styles.scene}>
-              <Text>{route.content}</Text>
-            </View>
-          )}
-          navigationBar={
-            <Navigator.NavigationBar
-              navigationBarRouteMapper={NavigationBarRouteMapper}
+      <Navigator
+        debugOverlay={false}
+        style={styles.appContainer}
+        initialRoute={newRandomRoute()}
+        renderScene={(route, navigator) => (
+          <ScrollView style={styles.scene}>
+            <Text style={styles.messageText}>{route.content}</Text>
+            <NavButton
+              onPress={() => {
+                navigator.immediatelyResetRouteStack([
+                  newRandomRoute(),
+                  newRandomRoute(),
+                  newRandomRoute(),
+                ]);
+              }}
+              text="Reset w/ 3 scenes"
             />
-          }
-        />
-      </View>
+            <NavButton
+              onPress={() => {
+                this.props.navigator.pop();
+              }}
+              text="Exit NavigationBar Example"
+            />
+          </ScrollView>
+        )}
+        navigationBar={
+          <Navigator.NavigationBar
+            navigationBarRouteMapper={NavigationBarRouteMapper}
+            navigationBarStyles={styles.navBar}
+          />
+        }
+      />
     );
   },
 
 });
 
 var styles = StyleSheet.create({
-  appContainer: {
-    overflow: 'hidden',
-    backgroundColor: '#ffffff',
-    flex: 1,
+  messageText: {
+    fontSize: 17,
+    fontWeight: '500',
+    padding: 15,
+    marginTop: 50,
+    marginLeft: 15,
   },
-  scene: {
-    paddingTop: 50,
-    flex: 1,
+  button: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: '#CDCDCD',
+  },
+  buttonText: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  navBar: {
+    backgroundColor: 'white',
   },
   navBarText: {
     fontSize: 16,
@@ -115,9 +156,20 @@ var styles = StyleSheet.create({
     fontWeight: '500',
     marginVertical: 9,
   },
+  navBarLeftButton: {
+    paddingLeft: 10,
+  },
+  navBarRightButton: {
+    paddingRight: 10,
+  },
   navBarButtonText: {
     color: cssVar('fbui-accent-blue'),
   },
+  scene: {
+    flex: 1,
+    paddingTop: 20,
+    backgroundColor: '#EAEAEA',
+  },
 });
 
 module.exports = NavigationBarSample;
diff --git a/Examples/UIExplorer/Navigator/NavigatorExample.js b/Examples/UIExplorer/Navigator/NavigatorExample.js
index f0cae637d2..0f0e510c37 100644
--- a/Examples/UIExplorer/Navigator/NavigatorExample.js
+++ b/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',
   }
 });