From 95de74d3491b438d25ffffe94a3b7f0485eb2897 Mon Sep 17 00:00:00 2001
From: Dani Akash <DaniAkash@users.noreply.github.com>
Date: Fri, 16 Jun 2017 12:45:33 +0530
Subject: [PATCH] Add Replace With Animation feature to Navigator

New feature
This commit will add replaceWithAnimation function to the Navigator component which will allow the user to replace a route while having the default transition animation of the target scene.

fixes facebook/react-native#1981

Implemented based of Stack-Overflow solution - http://stackoverflow.com/questions/40393380/react-native-transition-animation-for-navigator-replace

Test plan
the following repository [ReactNativeNavigationDemo (branch replaceWithAnimation)](https://github.com/DaniAkash/ReactNativeNavigationDemo/tree/replaceWithAnimation) has a page implemented using the replaceWithAnimation function in SplashPage.js which replaces the splash page with the homepage and it is tested with various use cases and found that the component is working as expected.

This Pull request was previously created at https://github.com/facebook/react-native/pull/12881
---
 src/Navigator.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/Navigator.js b/src/Navigator.js
index b714e99..28449ed 100644
--- a/src/Navigator.js
+++ b/src/Navigator.js
@@ -1186,6 +1186,33 @@ var Navigator = React.createClass({
       cb && cb();
     });
   },
+ 
+   /**
+    * Replace the previous scene with transition Animations.
+    * @param {object} route Route that replaces the previous scene.
+    */
+   replaceWithAnimation: function (route) {
+     const currentLength = this.state.presentedIndex + 1;
+     const currentRouteStack = this.state.routeStack.slice(0, currentLength);
+     const animationConfigFromSceneConfigStack = this.state.sceneConfigStack.slice(0, currentLength);
+     const nextStack = currentRouteStack.concat([route]);
+     const destIndex = nextStack.length - 1;
+     const nextSceneConfig = this.props.configureScene(route, nextStack);
+     const nextAnimationConfigStack = animationConfigFromSceneConfigStack.concat([nextSceneConfig]);
+ 
+     const newStack = currentRouteStack.slice(0, currentLength - 1).concat([route]);
+     this._emitWillFocus(nextStack[destIndex]);
+     this.setState({
+       routeStack: nextStack,
+       sceneConfigStack: nextAnimationConfigStack,
+     },() => {
+       this._enableScene(destIndex);
+       this._transitionTo(destIndex, nextSceneConfig.defaultTransitionVelocity, null, () => {
+         // Immediately reset the route stack after the transition is completed
+         this.immediatelyResetRouteStack(newStack);
+       });
+     });
+   },
 
   /**
    * Replace the current scene with a new route.