From 9a82c03e1f3415e255c5936aa2c35f0fd006a785 Mon Sep 17 00:00:00 2001
From: Tomasz Netczuk <netczuk.tomasz@gmail.com>
Date: Fri, 15 Apr 2016 18:22:46 -0700
Subject: [PATCH] Navigator.SceneConfigs.PushFromRight similar to native iOS
 animation.

Summary:The animation looks ok now.

However, the original iOS navigator adds transparent overlay and shadow. Any idea how to implement it? I'd like to add it.
Closes https://github.com/facebook/react-native/pull/5061

Differential Revision: D3129246

Pulled By: ericvicenti

fb-gh-sync-id: ee86261a49ea4b8f6854abf69bef3ebfd6878852
fbshipit-source-id: ee86261a49ea4b8f6854abf69bef3ebfd6878852
---
 .../Navigator/NavigatorSceneConfigs.js        | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js b/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
index 4281fb194..c26396dd6 100644
--- a/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
+++ b/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
@@ -34,6 +34,22 @@ var buildStyleInterpolator = require('buildStyleInterpolator');
 var SCREEN_WIDTH = Dimensions.get('window').width;
 var SCREEN_HEIGHT = Dimensions.get('window').height;
 
+var ToTheLeftIOS = {
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: -SCREEN_WIDTH * 0.3, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PixelRatio.get(),
+  },
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+};
+
 var FadeToTheLeft = {
   // Rotate *requires* you to break out each individual component of
   // rotation (x, y, z, w)
@@ -507,7 +523,10 @@ var BaseConfig = {
 var NavigatorSceneConfigs = {
   PushFromRight: {
     ...BaseConfig,
-    // We will want to customize this soon
+    animationInterpolators: {
+      into: buildStyleInterpolator(FromTheRight),
+      out: buildStyleInterpolator(ToTheLeftIOS),
+    },
   },
   FloatFromRight: {
     ...BaseConfig,