From 24f44558f678fd2c8139564d960c05f700a8bd68 Mon Sep 17 00:00:00 2001
From: Hedger Wang <hedger@fb.com>
Date: Mon, 25 Apr 2016 15:36:18 -0700
Subject: [PATCH] Fix initial scenes rendering for
 NavigationPagerStyleInterpolator

Summary:
The initial layout used to render scenes does not contain the actual
width and height measured and causes the issue as described at
https://github.com/ericvicenti/navigation-rfc/issues/61

The fix is to update the layout and re-render scenes once layout
is modified. Also scenes renderer should also consider the case that
when the layout is not measured yet.

Reviewed By: ericvicenti

Differential Revision: D3203245

fb-gh-sync-id: 4de89b9b43bc993d7c970c831458bd31c094073e
fbshipit-source-id: 4de89b9b43bc993d7c970c831458bd31c094073e
---
 .../NavigationPagerStyleInterpolator.js       | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationPagerStyleInterpolator.js b/Libraries/CustomComponents/NavigationExperimental/NavigationPagerStyleInterpolator.js
index 934be25ac82..78a9987cab5 100644
--- a/Libraries/CustomComponents/NavigationExperimental/NavigationPagerStyleInterpolator.js
+++ b/Libraries/CustomComponents/NavigationExperimental/NavigationPagerStyleInterpolator.js
@@ -51,6 +51,29 @@ import type  {
  * +-------------+-------------+-------------+
  */
 
+/**
+ * Render the initial style when the initial layout isn't measured yet.
+ */
+function forInitial(props: NavigationSceneRendererProps): Object {
+  const {
+    navigationState,
+    scene,
+  } = props;
+
+  const focused = navigationState.index === scene.index;
+  const opacity = focused ? 1 : 0;
+  // If not focused, move the scene to the far away.
+  const dir = scene.index > navigationState.index ? 1 : -1;
+  const translate = focused ? 0 : (1000000 * dir);
+  return {
+    opacity,
+    transform: [
+      { translateX: translate },
+      { translateY: translate },
+    ],
+  };
+}
+
 function forHorizontal(props: NavigationSceneRendererProps): Object {
   const {
     layout,
@@ -58,6 +81,10 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
     scene,
   } = props;
 
+  if (!layout.isMeasured) {
+    return forInitial(props);
+  }
+
   const index = scene.index;
   const inputRange = [index - 1, index, index + 1];