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

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}

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -24,6 +24,7 @@ const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
 const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
 
 const {
+  Animated,
   AppRegistry,
   NavigationExperimental,
   SnapshotViewIOS,

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) {
+    if (lastProps.navigationState.index !== this.props.navigationState.index && this.props.setTiming) {
-      Animated.spring(
+      this.props.setTiming(this.state.position, this.props.navigationState, lastProps.navigationState);
-        this.state.position,
-        {toValue: this.props.navigationState.index}
-      ).start();
     }
   }
   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;