From 19f81be9b480b4662067e44bd75f023c5ecebc0b Mon Sep 17 00:00:00 2001
From: Eric Vicenti <evv@fb.com>
Date: Mon, 22 Feb 2016 16:15:43 -0800
Subject: [PATCH] NavigationAnimatedView configurable navigation timing

Summary:Add setTiming prop for custom timing configuration

Also improve the current timing of the navigation animation to look more natural and less springy

Reviewed By: javache

Differential Revision: D2938500

fb-gh-sync-id: 3e6c6dd6077ff9d6a343f760f7b762096ce76600
shipit-source-id: 3e6c6dd6077ff9d6a343f760f7b762096ce76600
---
 .../NavigationAnimatedExample.js              |  4 +++
 Examples/UIExplorer/UIExplorerApp.ios.js      |  1 +
 .../NavigationAnimatedView.js                 | 30 +++++++++++++++----
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js
index a44d44c1e..3054a8a97 100644
--- a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js
+++ b/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js
@@ -15,6 +15,7 @@
 
 var React = require('react-native');
 var {
+  Animated,
   NavigationExperimental,
   StyleSheet,
   ScrollView,
@@ -80,6 +81,9 @@ class NavigationAnimatedExample extends React.Component {
             getTitle={state => state.key}
           />
         )}
+        setTiming={(pos, navState) => {
+          Animated.timing(pos, {toValue: navState.index, duration: 1000}).start();
+        }}
         renderScene={(state, index, position, layout) => (
           <NavigationCard
             key={state.key}
diff --git a/Examples/UIExplorer/UIExplorerApp.ios.js b/Examples/UIExplorer/UIExplorerApp.ios.js
index f9dfe5c87..99d08978f 100644
--- a/Examples/UIExplorer/UIExplorerApp.ios.js
+++ b/Examples/UIExplorer/UIExplorerApp.ios.js
@@ -24,6 +24,7 @@ const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
 const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
 
 const {
+  Animated,
   AppRegistry,
   NavigationExperimental,
   SnapshotViewIOS,
diff --git a/Libraries/NavigationExperimental/NavigationAnimatedView.js b/Libraries/NavigationExperimental/NavigationAnimatedView.js
index 76fcd7960..8b24286df 100644
--- a/Libraries/NavigationExperimental/NavigationAnimatedView.js
+++ b/Libraries/NavigationExperimental/NavigationAnimatedView.js
@@ -80,13 +80,20 @@ type SceneRenderer = (
   index: number,
   position: Animated.Value,
   layout: Layout
-) => ReactElement
+) => ReactElement;
+
+type TimingSetter = (
+  position: Animated.Value,
+  newState: NavigationParentState,
+  lastState: NavigationParentState
+) => void;
 
 type Props = {
   navigationState: NavigationParentState;
   renderScene: SceneRenderer;
   renderOverlay: ?OverlayRenderer;
   style: any;
+  setTiming: ?TimingSetter;
 };
 
 class NavigationAnimatedView extends React.Component {
@@ -120,11 +127,8 @@ class NavigationAnimatedView extends React.Component {
     }
   }
   componentDidUpdate(lastProps) {
-    if (lastProps.navigationState.index !== this.props.navigationState.index) {
-      Animated.spring(
-        this.state.position,
-        {toValue: this.props.navigationState.index}
-      ).start();
+    if (lastProps.navigationState.index !== this.props.navigationState.index && this.props.setTiming) {
+      this.props.setTiming(this.state.position, this.props.navigationState, lastProps.navigationState);
     }
   }
   componentWillUnmount() {
@@ -220,6 +224,20 @@ class NavigationAnimatedView extends React.Component {
   }
 }
 
+function setDefaultTiming(position, navigationState) {
+  Animated.spring(
+    position,
+    {
+      bounciness: 0,
+      toValue: navigationState.index,
+    }
+  ).start();
+}
+
+NavigationAnimatedView.defaultProps = {
+  setTiming: setDefaultTiming,
+};
+
 NavigationAnimatedView = NavigationContainer.create(NavigationAnimatedView);
 
 module.exports = NavigationAnimatedView;