NavigationExperimental: Add key to NavigationSceneRendererProps

Summary:
This should simplify the renderScene usage a bit because the react key is required and this will make sure they are rendered with the right key automatically.

It changes the string to make sure people do not rely on this API for anything else.

Reviewed By: javache

Differential Revision: D3033933

fb-gh-sync-id: 036424af28693be32c3a3290f5c6667a6a6a04ac
fbshipit-source-id: 036424af28693be32c3a3290f5c6667a6a6a04ac

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -119,7 +119,6 @@ class NavigationAnimatedExample extends React.Component {
     return (
       <NavigationCard
         {...props}
-        key={'card_' + props.scene.navigationState.key}
         renderScene={this._renderScene}
       />
     );

Libraries/NavigationExperimental/NavigationAnimatedView.js

@@ -189,6 +189,7 @@ class NavigationAnimatedView
       onNavigate,
       position,
       scene,
+      key: 'scene_' + scene.navigationState.key,
       scenes,
     });
   }
@@ -208,6 +209,7 @@ class NavigationAnimatedView
 
       return renderOverlay({
         layout: this.state.layout,
+        key: navigationState.key,
         navigationState,
         onNavigate,
         position,

Libraries/NavigationExperimental/NavigationPropTypes.js

@@ -66,6 +66,7 @@ const scene = PropTypes.shape({
 
 /* NavigationSceneRendererProps */
 const SceneRenderer = {
+  key: PropTypes.string.isRequired,
   layout: layout.isRequired,
   navigationState: navigationParentState.isRequired,
   onNavigate: PropTypes.func.isRequired,
@@ -97,6 +98,7 @@ function extractSceneRendererProps(
   props: NavigationSceneRendererProps,
 ): NavigationSceneRendererProps {
   return {
+    key: props.scene.navigationState.key,
     layout: props.layout,
     navigationState: props.navigationState,
     onNavigate: props.onNavigate,

Libraries/NavigationExperimental/NavigationTypeDefinition.js

@@ -66,6 +66,9 @@ export type NavigationSceneRendererProps = {
   // The scene to render.
   scene: NavigationScene,
 
+  // The key of the scene
+  key: string,
+
   // All the scenes of the containing view's.
   scenes: Array<NavigationScene>,
 };

Libraries/NavigationExperimental/NavigationView.js

@@ -122,12 +122,15 @@ class NavigationView extends React.Component<any, Props, any> {
       scenes,
     } = this.state;
 
+    const scene = scenes[navigationState.index];
+
     const sceneProps = {
+      key: 'scene_' + scene.navigationState.key,
       layout,
       navigationState: navigationState,
       onNavigate: onNavigate,
       position: this._position,
-      scene: scenes[navigationState.index],
+      scene,
       scenes,
     };