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) => ( 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;