Unify scene rederer params that are used render the scene / header.

Reviewed By: fkgozali

Differential Revision: D2981045

fb-gh-sync-id: 21688d92e31d882c5a31dd83ca064c2a01837164
shipit-source-id: 21688d92e31d882c5a31dd83ca064c2a01837164

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -74,31 +74,34 @@ class NavigationAnimatedExample extends React.Component {
       <NavigationAnimatedView
         navigationState={navigationState}
         style={styles.animatedView}
-        renderOverlay={(position, layout) => (
+        renderOverlay={(props) => (
           <NavigationHeader
-            navigationState={navigationState}
-            position={position}
+            navigationState={props.navigationParentState}
+            position={props.position}
             getTitle={state => state.key}
           />
         )}
         setTiming={(pos, navState) => {
           Animated.timing(pos, {toValue: navState.index, duration: 1000}).start();
         }}
-        renderScene={(state, index, position, layout) => (
+        renderScene={(props) => (
           <NavigationCard
-            key={state.key}
-            index={index}
-            navigationState={navigationState}
-            position={position}
-            layout={layout}>
+            key={props.navigationState.key}
+            index={props.index}
+            navigationState={props.navigationParentState}
+            position={props.position}
+            layout={props.layout}>
             <ScrollView style={styles.scrollView}>
               <NavigationExampleRow
-                text={navigationState.children[navigationState.index].key}
+                text={props.navigationState.key}
               />
               <NavigationExampleRow
                 text="Push!"
                 onPress={() => {
-                  onNavigate({ type: 'push', key: 'Route #' + navigationState.children.length });
+                  onNavigate({
+                    type: 'push',
+                    key: 'Route #' + props.navigationParentState.children.length
+                  });
                 }}
               />
               <NavigationExampleRow

Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.js

@@ -79,11 +79,11 @@ class NavigationCardStackExample extends React.Component {
     });
   }
 
-  _renderScene(navigationState, index, position, layout) {
+  _renderScene(props) {
     return (
       <ScrollView style={styles.scrollView}>
         <NavigationExampleRow
-          text={JSON.stringify(navigationState)}
+          text={JSON.stringify(props.navigationState)}
         />
         <NavigationExampleRow
           text="Push Route"

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -154,25 +154,24 @@ class ExampleTabScreen extends React.Component {
       />
     );
   }
-  _renderHeader(position, layout) {
+  _renderHeader(props) {
     return (
       <NavigationHeader
-        navigationState={this.props.navigationState}
-        position={position}
-        layout={layout}
+        navigationState={props.navigationParentState}
+        position={props.position}
+        layout={props.layout}
         getTitle={state => stateTypeTitleMap(state)}
       />
     );
   }
-  _renderScene(child, index, position, layout) {
+  _renderScene(props) {
     return (
       <NavigationCard
-        key={child.key}
-        index={index}
-        childState={child}
-        navigationState={this.props.navigationState}
-        position={position}
-        layout={layout}>
+        key={props.navigationState.key}
+        index={props.index}
+        navigationState={props.navigationParentState}
+        position={props.position}
+        layout={props.layout}>
         <ScrollView style={styles.scrollView}>
           <NavigationExampleRow
             text="Open page"

Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js

@@ -30,13 +30,13 @@ var NavigationExampleRow = require('./NavigationExampleRow');
 var EXAMPLES = {
   'Tabs': require('./NavigationTabsExample'),
   'Basic': require('./NavigationBasicExample'),
-  'Animated Card Stack': require('./NavigationAnimatedExample'),
+  'Animated Example': require('./NavigationAnimatedExample'),
   'Composition': require('./NavigationCompositionExample'),
   'Card Stack Example': require('./NavigationCardStackExample'),
   'Tic Tac Toe': require('./NavigationTicTacToeExample'),
 };
 
-var EXAMPLE_STORAGE_KEY = 'xNavigationExperimentalExample';
+var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
 
 var NavigationExperimentalExample = React.createClass({
   statics: {
@@ -47,13 +47,13 @@ var NavigationExperimentalExample = React.createClass({
 
   getInitialState: function() {
     return {
-      exampe: null,
+      example: null,
     };
   },
 
   componentDidMount() {
     AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => {
-      if (err || !example) {
+      if (err || !example || !EXAMPLES[example]) {
         this.setState({
           example: 'menu',
         });

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -34,6 +34,7 @@ const {
   TouchableHighlight,
   View,
 } = React;
+
 const {
   AnimatedView: NavigationAnimatedView,
   Card: NavigationCard,
@@ -41,19 +42,14 @@ const {
   Reducer: NavigationReducer,
   RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
-const StackReducer = NavigationReducer.StackReducer;
-
-import type {
-  NavigationState,
-} from 'NavigationStateUtils'
 
 import type { Value } from 'Animated';
-import type { Layout } from 'NavigationAnimatedView';
+
+import type { NavigationStateRendererProps } from 'NavigationAnimatedView';
+
 import type { UIExplorerNavigationState } from './UIExplorerNavigationReducer';
 
-import type {
-  UIExplorerExample,
-} from './UIExplorerList.ios'
+import type { UIExplorerExample } from './UIExplorerList.ios';
 
 function PathActionMap(path: string): ?Object {
   // Warning! Hacky parsing for example code. Use a library for this!
@@ -86,8 +82,12 @@ function URIActionMap(uri: ?string): ?Object {
 class UIExplorerApp extends React.Component {
   _navigationRootRef: ?NavigationRootContainer;
   _renderNavigation: Function;
+  _renderOverlay: Function;
+  _renderScene: Function;
   componentWillMount() {
     this._renderNavigation = this._renderNavigation.bind(this);
+    this._renderOverlay = this._renderOverlay.bind(this);
+    this._renderScene = this._renderScene.bind(this);
   }
   render() {
     return (
@@ -119,41 +119,31 @@ class UIExplorerApp extends React.Component {
       <NavigationAnimatedView
         navigationState={stack}
         style={styles.container}
-        renderOverlay={this._renderOverlay.bind(this, stack)}
-        renderScene={this._renderSceneContainer.bind(this, stack)}
+        renderOverlay={this._renderOverlay}
+        renderScene={this._renderScene}
       />
     );
   }
 
-  _renderOverlay(
-    navigationState: NavigationState,
-    position: Value,
-    layout: Layout
-  ): ReactElement {
+  _renderOverlay(props: NavigationStateRendererProps): ReactElement {
     return (
       <NavigationHeader
-        navigationState={navigationState}
-        position={position}
+        navigationState={props.navigationParentState}
+        position={props.position}
         getTitle={UIExplorerStateTitleMap}
       />
-    );    
+    );
   }
 
-  _renderSceneContainer(
-    navigationState: NavigationState,
-    scene: NavigationState,
-    index: number,
-    position: Value,
-    layout: Layout
-  ): ReactElement {
+  _renderOverlay(props: NavigationStateRendererProps): ReactElement {
     return (
       <NavigationCard
-        key={scene.key}
-        index={index}
-        navigationState={navigationState}
-        position={position}
-        layout={layout}>
-        {this._renderScene(scene)}
+        index={props.index}
+        key={props.navigationState.key}
+        layout={props.layout}
+        navigationState={props.navigationParentState}
+        position={props.position}>
+        {this._renderScene(props.navigationState)}
       </NavigationCard>
     );
   }