Transitioner: Fix instantaneous transitions (react-navigation#4404)

* Transitioner: Fix instantaneous transitions The transitioner will always perform an animation on state change. Instead we should check if the navigation state is requesting a transition with isTransitioning. If not, we follow a similar codepath to transitioning, without any animation. * Update .eslintrc
wanderbon · Jun 4, 2018 · 4be99b6 · 4be99b6
1 parent 80016b7
commit 4be99b6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,18 +7,18 @@
     "prettier/react"
   ],
   "parser": "babel-eslint",
-  "plugins": [
-    "react",
-    "prettier"
-  ],
+  "plugins": ["react", "prettier"],
   "env": {
     "jasmine": true
   },
   "rules": {
-    "prettier/prettier": ["error", {
-      "trailingComma": "es5",
-      "singleQuote": true
-    }],
+    "prettier/prettier": [
+      "error",
+      {
+        "trailingComma": "es5",
+        "singleQuote": true
+      }
+    ],
 
     "no-underscore-dangle": "off",
     "no-use-before-define": "off",
@@ -27,14 +27,11 @@
     "no-plusplus": "off",
     "no-class-assign": "off",
     "no-duplicate-imports": "off",
-
     "import/extensions": "off",
     "import/no-extraneous-dependencies": "off",
     "import/no-unresolved": "off",
 
-    "react/jsx-filename-extension": [
-      "off", { "extensions": [".js", ".jsx"] }
-    ],
+    "react/jsx-filename-extension": ["off", { "extensions": [".js", ".jsx"] }],
 
     "react/sort-comp": "off",
     "react/prefer-stateless-function": "off",

diff --git a/examples/NavigationPlayground/js/SimpleStack.js b/examples/NavigationPlayground/js/SimpleStack.js
@@ -15,6 +15,8 @@ import {
   createStackNavigator,
   SafeAreaView,
   withNavigation,
+  NavigationActions,
+  StackActions,
 } from 'react-navigation';
 import invariant from 'invariant';
 
@@ -62,6 +64,22 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           onPress={() => push('Profile', { name: 'Jane' })}
           title="Push a profile screen"
         />
+        <Button
+          onPress={() =>
+            navigation.dispatch(
+              StackActions.reset({
+                index: 0,
+                actions: [
+                  NavigationActions.navigate({
+                    routeName: 'Photos',
+                    params: { name: 'Jane' },
+                  }),
+                ],
+              })
+            )
+          }
+          title="Reset photos"
+        />
         <Button
           onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
           title="Navigate to a photos screen"

diff --git a/src/views/Transitioner.js b/src/views/Transitioner.js
@@ -90,6 +90,24 @@ class Transitioner extends React.Component {
     this._prevTransitionProps = this._transitionProps;
     this._transitionProps = buildTransitionProps(nextProps, nextState);
 
+    const toValue = nextProps.navigation.state.index;
+
+    if (!this._transitionProps.navigation.state.isTransitioning) {
+      this.setState(nextState, async () => {
+        const result = nextProps.onTransitionStart(
+          this._transitionProps,
+          this._prevTransitionProps
+        );
+        if (result instanceof Promise) {
+          await result;
+        }
+        progress.setValue(1);
+        position.setValue(toValue);
+        this._onTransitionEnd();
+      });
+      return;
+    }
+
     // get the transition spec.
     const transitionUserSpec = nextProps.configureTransition
       ? nextProps.configureTransition(
@@ -106,7 +124,6 @@ class Transitioner extends React.Component {
     const { timing } = transitionSpec;
     delete transitionSpec.timing;
 
-    const toValue = nextProps.navigation.state.index;
     const positionHasChanged = position.__getValue() !== toValue;
 
     // if swiped back, indexHasChanged == true && positionHasChanged == false