[ReactNative] JSNavigationStack rename routeMapper to renderSceneForRoute

Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js

@@ -71,101 +71,98 @@ var SampleNavigationBarRouteMapper = {
   }
 };
 
-var SampleRouteMapper = {
+var _delay = 400; // Just to test for race conditions with native nav.
 
-  delay: 400, // Just to test for race conditions with native nav.
+var renderScene = function(route, navigationOperations) {
+  var content = route.content;
+  return (
+    <ScrollView>
+      <View style={styles.scene}>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigationOperations.push)}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>request push soon</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigationOperations.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigationOperations.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigationOperations.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigationOperations.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_pushRouteLater(navigationOperations.replace)}>
+          <View style={styles.button}>
+            <Text>{content}</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_popRouteLater(navigationOperations.pop)}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>request pop soon</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={
+            _immediatelySetTwoItemsLater(
+              navigationOperations.immediatelyResetRouteStack
+            )
+          }>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>Immediate set two routes</Text>
+          </View>
+        </TouchableBounce>
+        <TouchableBounce
+          onPress={_popToTopLater(navigationOperations.popToTop)}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>pop to top soon</Text>
+          </View>
+        </TouchableBounce>
+      </View>
+    </ScrollView>
+  );
+};
 
-  navigationItemForRoute: function(route, navigationOperations) {
-    var content = route.content;
-    return (
-      <ScrollView>
-        <View style={styles.scene}>
-          <TouchableBounce
-            onPress={this._pushRouteLater(navigationOperations.push)}>
-            <View style={styles.button}>
-              <Text style={styles.buttonText}>request push soon</Text>
-            </View>
-          </TouchableBounce>
-          <TouchableBounce
-            onPress={this._pushRouteLater(navigationOperations.replace)}>
-            <View style={styles.button}>
-              <Text>{content}</Text>
-            </View>
-          </TouchableBounce>
-          <TouchableBounce
-            onPress={this._pushRouteLater(navigationOperations.replace)}>
-            <View style={styles.button}>
-              <Text>{content}</Text>
-            </View>
-          </TouchableBounce>
-          <TouchableBounce
-            onPress={this._pushRouteLater(navigationOperations.replace)}>
-            <View style={styles.button}>
-              <Text>{content}</Text>
-            </View>
-          </TouchableBounce>
-          <TouchableBounce
-            onPress={this._pushRouteLater(navigationOperations.replace)}>
-            <View style={styles.button}>
-              <Text>{content}</Text>
-            </View>
-          </TouchableBounce>
-          <TouchableBounce
-            onPress={this._pushRouteLater(navigationOperations.replace)}>
-            <View style={styles.button}>
-              <Text>{content}</Text>
-            </View>
-          </TouchableBounce>
-          <TouchableBounce
-            onPress={this._popRouteLater(navigationOperations.pop)}>
-            <View style={styles.button}>
-              <Text style={styles.buttonText}>request pop soon</Text>
-            </View>
-          </TouchableBounce>
-          <TouchableBounce
-            onPress={
-              this._immediatelySetTwoItemsLater(
-                navigationOperations.immediatelyResetRouteStack
-              )
-            }>
-            <View style={styles.button}>
-              <Text style={styles.buttonText}>Immediate set two routes</Text>
-            </View>
-          </TouchableBounce>
-          <TouchableBounce
-            onPress={this._popToTopLater(navigationOperations.popToTop)}>
-            <View style={styles.button}>
-              <Text style={styles.buttonText}>pop to top soon</Text>
-            </View>
-          </TouchableBounce>
-        </View>
-      </ScrollView>
-    );
-  },
+var _popToTopLater = function(popToTop) {
+  return () => setTimeout(popToTop, _delay);
+};
 
-  _popToTopLater: function(popToTop) {
-    return () => setTimeout(popToTop, SampleRouteMapper.delay);
-  },
+var _pushRouteLater = function(push) {
+  return () => setTimeout(
+    () => push(_getRandomRoute()),
+    _delay
+  );
+};
 
-  _pushRouteLater: function(push) {
-    return () => setTimeout(
-      () => push(_getRandomRoute()),
-      SampleRouteMapper.delay
-    );
-  },
+var _immediatelySetTwoItemsLater = function(immediatelyResetRouteStack) {
+  return () => setTimeout(
+    () => immediatelyResetRouteStack([
+      _getRandomRoute(),
+      _getRandomRoute(),
+    ])
+  );
+};
 
-  _immediatelySetTwoItemsLater: function(immediatelyResetRouteStack) {
-    return () => setTimeout(
-      () => immediatelyResetRouteStack([
-        _getRandomRoute(),
-        _getRandomRoute(),
-      ])
-    );
-  },
-
-  _popRouteLater: function(pop) {
-    return () => setTimeout(pop, SampleRouteMapper.delay);
-  },
+var _popRouteLater = function(pop) {
+  return () => setTimeout(pop, _delay);
 };
 
 var BreadcrumbNavSample = React.createClass({
@@ -194,7 +191,7 @@ var BreadcrumbNavSample = React.createClass({
             debugOverlay={false}
             style={[styles.appContainer]}
             initialRoute={initialRoute}
-            routeMapper={SampleRouteMapper}
+            renderScene={renderScene}
             navigationBar={
               <BreadcrumbNavigationBar
                 navigationBarRouteMapper={SampleNavigationBarRouteMapper}
@@ -212,7 +209,7 @@ var BreadcrumbNavSample = React.createClass({
             debugOverlay={false}
             style={[styles.appContainer]}
             initialRoute={initialRoute}
-            routeMapper={SampleRouteMapper}
+            renderScene={renderScene}
             navigationBar={
               <BreadcrumbNavigationBar
                 navigationBarRouteMapper={SampleNavigationBarRouteMapper}

Examples/UIExplorer/JSNavigationStack/JSNavigationStackExample.js

@@ -49,7 +49,7 @@ var TabBarExample = React.createClass({
     description: 'JS-implemented navigation',
   },
 
-  renderSceneForRoute: function(route, nav) {
+  renderScene: function(route, nav) {
     switch (route.id) {
       case 'menu':
         return (
@@ -72,9 +72,7 @@ var TabBarExample = React.createClass({
       <JSNavigationStack
         style={styles.container}
         initialRoute={{ id: 'menu', }}
-        routeMapper={{
-          navigationItemForRoute: this.renderSceneForRoute,
-        }}
+        renderScene={this.renderScene}
         animationConfigRouteMapper={(route) => JSNavigationStack.AnimationConfigs.FloatFromBottom}
       />
     );

Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js

@@ -27,84 +27,81 @@ var ROUTE_STACK = [
   _getRandomRoute(),
   _getRandomRoute(),
 ];
-var SampleRouteMapper = {
-
-  navigationItemForRoute: function(route, navigationOperations) {
-    return (
-      <ScrollView style={styles.scene}>
-        <View style={styles.scroll}>
-        <Text>{route.randNumber}</Text>
-        <TouchableBounce
-          onPress={() => {
-            navigationOperations.jumpBack();
-          }}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>jumpBack</Text>
-          </View>
-        </TouchableBounce>
-        <TouchableBounce
-          onPress={() => {
-            navigationOperations.jumpForward();
-          }}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>jumpForward</Text>
-          </View>
-        </TouchableBounce>
-        <TouchableBounce
-          onPress={() => {
-            navigationOperations.jumpTo(INIT_ROUTE);
-          }}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>jumpTo initial route</Text>
-          </View>
-        </TouchableBounce>
-        <TouchableBounce
-          onPress={() => {
-            navigationOperations.push(_getRandomRoute());
-          }}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>destructive: push</Text>
-          </View>
-        </TouchableBounce>
-        <TouchableBounce
-          onPress={() => {
-            navigationOperations.replace(_getRandomRoute());
-          }}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>destructive: replace</Text>
-          </View>
-        </TouchableBounce>
-        <TouchableBounce
-          onPress={() => {
-            navigationOperations.pop();
-          }}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>destructive: pop</Text>
-          </View>
-        </TouchableBounce>
-        <TouchableBounce
-          onPress={() =>  {
-            navigationOperations.immediatelyResetRouteStack([
-              _getRandomRoute(),
-              _getRandomRoute(),
-            ]);
-          }}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>destructive: Immediate set two routes</Text>
-          </View>
-        </TouchableBounce>
-        <TouchableBounce
-          onPress={() => {
-            navigationOperations.popToTop();
-          }}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>destructive: pop to top</Text>
-          </View>
-        </TouchableBounce>
-      </View>
-      </ScrollView>
-    );
-  },
+var renderScene = function(route, navigationOperations) {
+  return (
+    <ScrollView style={styles.scene}>
+      <View style={styles.scroll}>
+      <Text>{route.randNumber}</Text>
+      <TouchableBounce
+        onPress={() => {
+          navigationOperations.jumpBack();
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>jumpBack</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigationOperations.jumpForward();
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>jumpForward</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigationOperations.jumpTo(INIT_ROUTE);
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>jumpTo initial route</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigationOperations.push(_getRandomRoute());
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: push</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigationOperations.replace(_getRandomRoute());
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: replace</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigationOperations.pop();
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: pop</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() =>  {
+          navigationOperations.immediatelyResetRouteStack([
+            _getRandomRoute(),
+            _getRandomRoute(),
+          ]);
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: Immediate set two routes</Text>
+        </View>
+      </TouchableBounce>
+      <TouchableBounce
+        onPress={() => {
+          navigationOperations.popToTop();
+        }}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>destructive: pop to top</Text>
+        </View>
+      </TouchableBounce>
+    </View>
+    </ScrollView>
+  );
 };
 
 class JumpingNavBar extends React.Component {
@@ -140,7 +137,7 @@ var JumpingNavSample = React.createClass({
         style={[styles.appContainer]}
         initialRoute={INIT_ROUTE}
         initialRouteStack={ROUTE_STACK}
-        routeMapper={SampleRouteMapper}
+        renderScene={renderScene}
         navigationBar={<JumpingNavBar routeStack={ROUTE_STACK} />}
         shouldJumpOnBackstackPop={true}
       />

Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js

@@ -65,18 +65,6 @@ function newRandomRoute() {
   };
 }
 
-var RouteMapper = {
-
-  navigationItemForRoute: function(route, navigationOperations) {
-    return (
-      <View style={styles.scene}>
-        <Text>{route.content}</Text>
-      </View>
-    );
-  },
-
-};
-
 var NavigationBarSample = React.createClass({
 
   render: function() {
@@ -86,7 +74,11 @@ var NavigationBarSample = React.createClass({
           debugOverlay={false}
           style={styles.appContainer}
           initialRoute={newRandomRoute()}
-          routeMapper={RouteMapper}
+          renderScene={(route, navigationOperations) => (
+            <View style={styles.scene}>
+              <Text>{route.content}</Text>
+            </View>
+          )}
           navigationBar={
             <NavigationBar
               navigationBarRouteMapper={NavigationBarRouteMapper}

Examples/UIExplorer/JSNavigationStack/NestedBreadcrumbNavSample.js

@@ -42,7 +42,7 @@ var HorizontalNavigationBarRouteMapper = {
   titleContentForRoute: function(route, navigationOperations) {
     return (
       <TouchableBounce
-        onPress={() => navigationOperations.push(_getRandomRoute())}>
+        onPress={() => () => { navigationOperations.push(_getRandomRoute()); }}>
         <View>
           <Text style={styles.titleText}>{route.title}</Text>
         </View>
@@ -67,86 +67,62 @@ var HorizontalNavigationBarRouteMapper = {
   }
 };
 
-var ThirdDeepRouteMapper = {
-  navigationItemForRoute: function(route, navigationOperations) {
-    return (
-      <View style={styles.navigationItem}>
-        <ScrollView>
-          <View style={styles.thirdDeepScrollContent}>
-            <TouchableBounce
-              onPress={this._pushRoute(navigationOperations.push)}>
-              <View style={styles.button}>
-                <Text style={styles.buttonText}>request push soon</Text>
-              </View>
-            </TouchableBounce>
-          </View>
-        </ScrollView>
-      </View>
-    );
-  },
-
-  _pushRoute: function(push) {
-    return () => push(_getRandomRoute());
-  },
-};
-
-var SecondDeepRouteMapper = {
-  navigationItemForRoute: function(route, navigationOperations) {
-    return (
-      <View style={styles.navigationItem}>
+var ThirdDeepRouteMapper = (route, navigationOperations) => (
+  <View style={styles.navigationItem}>
+    <ScrollView>
+      <View style={styles.thirdDeepScrollContent}>
         <TouchableBounce
-          onPress={this._pushRoute(navigationOperations.push)}>
+          onPress={() => { navigationOperations.push(_getRandomRoute()); }}>
           <View style={styles.button}>
-            <Text style={styles.buttonText}>Push Horizontal</Text>
+            <Text style={styles.buttonText}>request push soon</Text>
           </View>
         </TouchableBounce>
-        <JSNavigationStack
-          style={styles.thirdDeepNavigator}
-          initialRoute={{title: '3x Nested Horizontal'}}
-          routeMapper={ThirdDeepRouteMapper}
-          navigationBar={
-            <BreadcrumbNavigationBar
-              navigationBarRouteMapper={HorizontalNavigationBarRouteMapper}
-            />
-          }
-        />
       </View>
-    );
-  },
+    </ScrollView>
+  </View>
+);
 
-  _pushRoute: function(push) {
-    return () => push(_getRandomRoute());
-  },
-};
-
-var FirstDeepRouteMapper = {
-  navigationItemForRoute: function(route, navigationOperations) {
-    return (
-      <View style={styles.navigationItem}>
-        <TouchableBounce
-          onPress={this._pushRoute(navigationOperations.push)}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>Push Outer Vertical Stack</Text>
-          </View>
-        </TouchableBounce>
-        <JSNavigationStack
-          style={styles.secondDeepNavigator}
-          initialRoute={{title: '2x Nested Horizontal Nav'}}
-          routeMapper={SecondDeepRouteMapper}
-          navigationBar={
-            <BreadcrumbNavigationBar
-              navigationBarRouteMapper={HorizontalNavigationBarRouteMapper}
-            />
-          }
-        />
+var SecondDeepRouteMapper = (route, navigationOperations) => (
+  <View style={styles.navigationItem}>
+    <TouchableBounce
+      onPress={() => { navigationOperations.push(_getRandomRoute()); }}>
+      <View style={styles.button}>
+        <Text style={styles.buttonText}>Push Horizontal</Text>
       </View>
-    );
-  },
+    </TouchableBounce>
+    <JSNavigationStack
+      style={styles.thirdDeepNavigator}
+      initialRoute={{title: '3x Nested Horizontal'}}
+      renderScene={ThirdDeepRouteMapper}
+      navigationBar={
+        <BreadcrumbNavigationBar
+          navigationBarRouteMapper={HorizontalNavigationBarRouteMapper}
+        />
+      }
+    />
+  </View>
+);
 
-  _pushRoute: function(push) {
-    return () => push(_getRandomRoute());
-  },
-};
+var FirstDeepRouteMapper = (route, navigationOperations) => (
+  <View style={styles.navigationItem}>
+    <TouchableBounce
+      onPress={() => { navigationOperations.push(_getRandomRoute()); }}>
+      <View style={styles.button}>
+        <Text style={styles.buttonText}>Push Outer Vertical Stack</Text>
+      </View>
+    </TouchableBounce>
+    <JSNavigationStack
+      style={styles.secondDeepNavigator}
+      initialRoute={{title: '2x Nested Horizontal Nav'}}
+      renderScene={SecondDeepRouteMapper}
+      navigationBar={
+        <BreadcrumbNavigationBar
+          navigationBarRouteMapper={HorizontalNavigationBarRouteMapper}
+        />
+      }
+    />
+  </View>
+);
 
 /**
  * The outer component.
@@ -160,7 +136,7 @@ var NestedBreadcrumbNavSample = React.createClass({
         style={[styles.appContainer]}
         animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
         initialRoute={initialRoute}
-        routeMapper={FirstDeepRouteMapper}
+        renderScene={FirstDeepRouteMapper}
       />
     );
   }