Skip to content

Commit

Permalink
Fix animation in fast navigation between scenes
Browse files Browse the repository at this point in the history
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 gitim@46dd8c9.

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 #10761

Differential Revision: D4226864

Pulled By: mkonicek

fbshipit-source-id: 31dceb6c8e497b2cbd891bbda4cb3add01cbcca0
  • Loading branch information
gitim authored and Facebook Github Bot committed Nov 23, 2016
1 parent 2121527 commit df43cc7
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions Libraries/NavigationExperimental/NavigationTransitioner.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,14 +127,16 @@ class NavigationTransitioner extends React.Component<any, Props, State> {
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(
Expand All @@ -151,8 +153,6 @@ class NavigationTransitioner extends React.Component<any, Props, State> {
const {timing} = transitionSpec;
delete transitionSpec.timing;

progress.setValue(0);

const animations = [
timing(
progress,
Expand Down

0 comments on commit df43cc7

Please sign in to comment.