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

Libraries/NavigationExperimental/NavigationAnimatedView.js

@@ -70,30 +70,39 @@ type Layout = {
   height: Animated.Value;
 };
 
-type OverlayRenderer = (
-  position: Animated.Value,
-  layout: Layout
-) => ReactElement;
-
 type Position = Animated.Value;
 
-type SceneRenderer = (
-  state: NavigationState,
+/**
+ * Definition of the props object that is passed to the functions
+ * that render the overlay and the scene.
+ */
+type NavigationStateRendererProps = {
+  // The state of the child view.
+  navigationState: NavigationState,
+  // The index of the child view.
   index: number,
+  // The "progressive index" of the containing navigation state.
   position: Position,
-  layout: Layout
+  // The layout of the the containing navigation view.
+  layout: Layout,
+  // The state of the the containing navigation view.
+  navigationParentState: NavigationParentState,
+};
+
+type NavigationStateRenderer = (
+  props: NavigationStateRendererProps,
 ) => ReactElement;
 
 type TimingSetter = (
   position: Animated.Value,
   newState: NavigationParentState,
-  lastState: NavigationParentState
+  lastState: NavigationParentState,
 ) => void;
 
 type Props = {
   navigationState: NavigationParentState;
-  renderScene: SceneRenderer;
-  renderOverlay: ?OverlayRenderer;
+  renderScene: NavigationStateRenderer;
+  renderOverlay: ?NavigationStateRenderer;
   style: any;
   setTiming: ?TimingSetter;
 };
@@ -194,7 +203,7 @@ class NavigationAnimatedView extends React.Component {
         }}
         style={this.props.style}>
         {this.state.scenes.map(this._renderScene, this)}
-        {this._renderOverlay(this._renderOverlay, this)}
+        {this._renderOverlay()}
       </View>
     );
   }
@@ -207,20 +216,25 @@ class NavigationAnimatedView extends React.Component {
     };
   }
   _renderScene(scene: NavigationScene) {
-    return this.props.renderScene(
-      scene.state,
-      scene.index,
-      this.state.position,
-      this._getLayout()
-    );
+    return this.props.renderScene({
+      index: scene.index,
+      layout: this._getLayout(),
+      navigationParentState: this.props.navigationState,
+      navigationState: scene.state,
+      position: this.state.position,
+    });
   }
   _renderOverlay() {
     const {renderOverlay} = this.props;
     if (renderOverlay) {
-      return renderOverlay(
-        this.state.position,
-        this._getLayout()
-      );
+      const parentState = this.props.navigationState;
+      return renderOverlay({
+        index: parentState.index,
+        layout: this._getLayout(),
+        navigationParentState: parentState,
+        navigationState: parentState.children[parentState.index],
+        position: this.state.position,
+      });
     }
     return null;
   }