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];