From 472f815e45295e37f34c65320524907fda8b7c8a Mon Sep 17 00:00:00 2001
From: Eric Vicenti <evv@fb.com>
Date: Thu, 5 May 2016 11:57:56 -0700
Subject: [PATCH] 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
---
 .../NavigationExperimental/NavigationAnimatedExample.js      | 1 -
 Libraries/NavigationExperimental/NavigationAnimatedView.js   | 2 ++
 Libraries/NavigationExperimental/NavigationPropTypes.js      | 2 ++
 Libraries/NavigationExperimental/NavigationTypeDefinition.js | 3 +++
 Libraries/NavigationExperimental/NavigationView.js           | 5 ++++-
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js
index 49087e6c3..88b446d47 100644
--- a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js
+++ b/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}
       />
     );
diff --git a/Libraries/NavigationExperimental/NavigationAnimatedView.js b/Libraries/NavigationExperimental/NavigationAnimatedView.js
index efa2e4034..009a26cb4 100644
--- a/Libraries/NavigationExperimental/NavigationAnimatedView.js
+++ b/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,
diff --git a/Libraries/NavigationExperimental/NavigationPropTypes.js b/Libraries/NavigationExperimental/NavigationPropTypes.js
index 6a8a04886..0c604675d 100644
--- a/Libraries/NavigationExperimental/NavigationPropTypes.js
+++ b/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,
diff --git a/Libraries/NavigationExperimental/NavigationTypeDefinition.js b/Libraries/NavigationExperimental/NavigationTypeDefinition.js
index f0dff93ed..d36ee54a4 100644
--- a/Libraries/NavigationExperimental/NavigationTypeDefinition.js
+++ b/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>,
 };
diff --git a/Libraries/NavigationExperimental/NavigationView.js b/Libraries/NavigationExperimental/NavigationView.js
index 157e1d36d..6da86c86d 100644
--- a/Libraries/NavigationExperimental/NavigationView.js
+++ b/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,
     };