diff --git a/Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js b/Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js
index 7be93a83a..0c18d3b97 100644
--- a/Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js
+++ b/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 (
+
+
+
+
+ request push soon
+
+
+
+
+ {content}
+
+
+
+
+ {content}
+
+
+
+
+ {content}
+
+
+
+
+ {content}
+
+
+
+
+ {content}
+
+
+
+
+ request pop soon
+
+
+
+
+ Immediate set two routes
+
+
+
+
+ pop to top soon
+
+
+
+
+ );
+};
- navigationItemForRoute: function(route, navigationOperations) {
- var content = route.content;
- return (
-
-
-
-
- request push soon
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- request pop soon
-
-
-
-
- Immediate set two routes
-
-
-
-
- pop to top soon
-
-
-
-
- );
- },
+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={
JSNavigationStack.AnimationConfigs.FloatFromBottom}
/>
);
diff --git a/Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js b/Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js
index a2d28e695..464e5e46b 100644
--- a/Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js
+++ b/Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js
@@ -27,84 +27,81 @@ var ROUTE_STACK = [
_getRandomRoute(),
_getRandomRoute(),
];
-var SampleRouteMapper = {
-
- navigationItemForRoute: function(route, navigationOperations) {
- return (
-
-
- {route.randNumber}
- {
- navigationOperations.jumpBack();
- }}>
-
- jumpBack
-
-
- {
- navigationOperations.jumpForward();
- }}>
-
- jumpForward
-
-
- {
- navigationOperations.jumpTo(INIT_ROUTE);
- }}>
-
- jumpTo initial route
-
-
- {
- navigationOperations.push(_getRandomRoute());
- }}>
-
- destructive: push
-
-
- {
- navigationOperations.replace(_getRandomRoute());
- }}>
-
- destructive: replace
-
-
- {
- navigationOperations.pop();
- }}>
-
- destructive: pop
-
-
- {
- navigationOperations.immediatelyResetRouteStack([
- _getRandomRoute(),
- _getRandomRoute(),
- ]);
- }}>
-
- destructive: Immediate set two routes
-
-
- {
- navigationOperations.popToTop();
- }}>
-
- destructive: pop to top
-
-
-
-
- );
- },
+var renderScene = function(route, navigationOperations) {
+ return (
+
+
+ {route.randNumber}
+ {
+ navigationOperations.jumpBack();
+ }}>
+
+ jumpBack
+
+
+ {
+ navigationOperations.jumpForward();
+ }}>
+
+ jumpForward
+
+
+ {
+ navigationOperations.jumpTo(INIT_ROUTE);
+ }}>
+
+ jumpTo initial route
+
+
+ {
+ navigationOperations.push(_getRandomRoute());
+ }}>
+
+ destructive: push
+
+
+ {
+ navigationOperations.replace(_getRandomRoute());
+ }}>
+
+ destructive: replace
+
+
+ {
+ navigationOperations.pop();
+ }}>
+
+ destructive: pop
+
+
+ {
+ navigationOperations.immediatelyResetRouteStack([
+ _getRandomRoute(),
+ _getRandomRoute(),
+ ]);
+ }}>
+
+ destructive: Immediate set two routes
+
+
+ {
+ navigationOperations.popToTop();
+ }}>
+
+ destructive: pop to top
+
+
+
+
+ );
};
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={}
shouldJumpOnBackstackPop={true}
/>
diff --git a/Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js b/Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js
index 722179fad..1780da96f 100644
--- a/Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js
+++ b/Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js
@@ -65,18 +65,6 @@ function newRandomRoute() {
};
}
-var RouteMapper = {
-
- navigationItemForRoute: function(route, navigationOperations) {
- return (
-
- {route.content}
-
- );
- },
-
-};
-
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) => (
+
+ {route.content}
+
+ )}
navigationBar={
navigationOperations.push(_getRandomRoute())}>
+ onPress={() => () => { navigationOperations.push(_getRandomRoute()); }}>
{route.title}
@@ -67,86 +67,62 @@ var HorizontalNavigationBarRouteMapper = {
}
};
-var ThirdDeepRouteMapper = {
- navigationItemForRoute: function(route, navigationOperations) {
- return (
-
-
-
-
-
- request push soon
-
-
-
-
-
- );
- },
-
- _pushRoute: function(push) {
- return () => push(_getRandomRoute());
- },
-};
-
-var SecondDeepRouteMapper = {
- navigationItemForRoute: function(route, navigationOperations) {
- return (
-
+var ThirdDeepRouteMapper = (route, navigationOperations) => (
+
+
+
+ onPress={() => { navigationOperations.push(_getRandomRoute()); }}>
- Push Horizontal
+ request push soon
-
- }
- />
- );
- },
+
+
+);
- _pushRoute: function(push) {
- return () => push(_getRandomRoute());
- },
-};
-
-var FirstDeepRouteMapper = {
- navigationItemForRoute: function(route, navigationOperations) {
- return (
-
-
-
- Push Outer Vertical Stack
-
-
-
- }
- />
+var SecondDeepRouteMapper = (route, navigationOperations) => (
+
+ { navigationOperations.push(_getRandomRoute()); }}>
+
+ Push Horizontal
- );
- },
+
+
+ }
+ />
+
+);
- _pushRoute: function(push) {
- return () => push(_getRandomRoute());
- },
-};
+var FirstDeepRouteMapper = (route, navigationOperations) => (
+
+ { navigationOperations.push(_getRandomRoute()); }}>
+
+ Push Outer Vertical Stack
+
+
+
+ }
+ />
+
+);
/**
* The outer component.
@@ -160,7 +136,7 @@ var NestedBreadcrumbNavSample = React.createClass({
style={[styles.appContainer]}
animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
initialRoute={initialRoute}
- routeMapper={FirstDeepRouteMapper}
+ renderScene={FirstDeepRouteMapper}
/>
);
}
diff --git a/Libraries/CustomComponents/JSNavigationStack.js b/Libraries/CustomComponents/JSNavigationStack.js
index f0765297c..1dd3bd998 100644
--- a/Libraries/CustomComponents/JSNavigationStack.js
+++ b/Libraries/CustomComponents/JSNavigationStack.js
@@ -76,9 +76,8 @@ var JSNavigationStack = React.createClass({
propTypes: {
animationConfigRouteMapper: PropTypes.func,
- routeMapper: PropTypes.shape({
- navigationItemForRoute: PropTypes.func,
- }),
+ // Returns the rendered scene to display when invoked with (route, navigator)
+ renderScene: PropTypes.func.isRequired,
initialRoute: PropTypes.object,
initialRouteStack: PropTypes.arrayOf(PropTypes.object),
// Will emit the target route on mounting and before each nav transition,
@@ -797,8 +796,7 @@ var JSNavigationStack = React.createClass({
this.state.updatingRangeLength !== 0 &&
i >= this.state.updatingRangeStart &&
i <= this.state.updatingRangeStart + this.state.updatingRangeLength;
- var routeMapper = this.props.routeMapper;
- var child = routeMapper.navigationItemForRoute(
+ var child = this.props.renderScene(
route,
this.memoizedNavigationOperations,
this._onItemRef.bind(null, this.state.idStack[i])