From df43cc7f6bf24802275e27a068a7f6a3169d538f Mon Sep 17 00:00:00 2001 From: Timur Gibadullin Date: Wed, 23 Nov 2016 09:43:17 -0800 Subject: [PATCH] Fix animation in fast navigation between scenes Summary: There is a bug in navigation animation: ![-05-2016 16-04-23](https://cloud.githubusercontent.com/assets/3778452/20030228/8d93bc3e-a371-11e6-87d6-2c5c994733b5.gif) navigation animation from route-2 was awful, route-3 scene appeared without any animation, I pushed above example to https://github.com/gitim/react-native/commit/46dd8c93b491893f1707c3db80ca39b9ac9ba59a. This bug can be reproduced when user navigates to the next scene immediately after navigation to the current one or when navigating between scenes programmatically (e.g. between loading scene and whatever next scene). I made some investigation and It looks like that `progress` should be reseted before building the new _transitionProps. The above example after applying this patch: ![-05-2016 16-12-16](https://cloud.githubusercontent.com/assets/3778452/20030259/a800681e-a372-11e6-847a-991d355a5940.gif) Closes https://github.com/facebook/react-native/pull/10761 Differential Revision: D4226864 Pulled By: mkonicek fbshipit-source-id: 31dceb6c8e497b2cbd891bbda4cb3add01cbcca0 --- .../NavigationExperimental/NavigationTransitioner.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Libraries/NavigationExperimental/NavigationTransitioner.js b/Libraries/NavigationExperimental/NavigationTransitioner.js index 2a6aa90ebb1a02..f6a67dc5d78d3f 100644 --- a/Libraries/NavigationExperimental/NavigationTransitioner.js +++ b/Libraries/NavigationExperimental/NavigationTransitioner.js @@ -127,14 +127,16 @@ class NavigationTransitioner extends React.Component { scenes: nextScenes, }; - this._prevTransitionProps = this._transitionProps; - this._transitionProps = buildTransitionProps(nextProps, nextState); - const { position, progress, } = nextState; + progress.setValue(0); + + this._prevTransitionProps = this._transitionProps; + this._transitionProps = buildTransitionProps(nextProps, nextState); + // get the transition spec. const transitionUserSpec = nextProps.configureTransition ? nextProps.configureTransition( @@ -151,8 +153,6 @@ class NavigationTransitioner extends React.Component { const {timing} = transitionSpec; delete transitionSpec.timing; - progress.setValue(0); - const animations = [ timing( progress,