From 41af8e1451786f77abba66a1a13c38300dc59827 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Mon, 29 Oct 2018 22:13:06 -0700
Subject: [PATCH 1/3] Compute scenes when queued transition starts

---
 example/src/SimpleStack.js | 37 ++++++++++++++++++
 src/views/Transitioner.js  | 79 +++++++++++++++++++++++++++-----------
 2 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/example/src/SimpleStack.js b/example/src/SimpleStack.js
index 9142e71..ea3fcf1 100644
--- a/example/src/SimpleStack.js
+++ b/example/src/SimpleStack.js
@@ -9,11 +9,24 @@ const Buttons = withNavigation(props => (
       title="Go to Details"
       onPress={() => props.navigation.navigate('Details')}
     />
+    <Button title="Go and then go to details quick" onPress={() => {
+      let routeName = props.navigation.state.routeName;
+      props.navigation.pop();
+      setTimeout(() => {
+        props.navigation.navigate('Details');
+      }, 100);
+    }} />
     <Button
       title="Go to Headerless"
       onPress={() => props.navigation.navigate('Headerless')}
     />
     <Button title="Go back" onPress={() => props.navigation.goBack()} />
+    <Button title="Go back quick" onPress={() => {
+      props.navigation.pop();
+      setTimeout(() => {
+        props.navigation.pop();
+      }, 100);
+    }} />
     <Button
       title="Go back to all examples"
       onPress={() => props.navigation.navigate('Home')}
@@ -26,6 +39,14 @@ class ListScreen extends React.Component {
     title: 'List',
   };
 
+  componentDidMount() {
+    console.log('ListScreen didMount');
+  }
+
+  componentWillUnmount() {
+    console.log('ListScreen willUnmount');
+  }
+
   render() {
     return (
       <View
@@ -52,6 +73,14 @@ class DetailsScreen extends React.Component {
     },
   };
 
+  componentDidMount() {
+    console.log('DetailsScreen didMount');
+  }
+
+  componentWillUnmount() {
+    console.log('DetailsScreen willUnmount');
+  }
+
   render() {
     return (
       <View
@@ -81,6 +110,14 @@ class HeaderlessScreen extends React.Component {
     header: null,
   };
 
+  componentDidMount() {
+    console.log('HeaderlessScreen didMount');
+  }
+
+  componentWillUnmount() {
+    console.log('HeaderlessScreen willUnmount');
+  }
+
   render() {
     return (
       <View
diff --git a/src/views/Transitioner.js b/src/views/Transitioner.js
index e83e169..01f3eb4 100644
--- a/src/views/Transitioner.js
+++ b/src/views/Transitioner.js
@@ -68,22 +68,29 @@ class Transitioner extends React.Component {
 
   // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(nextProps) {
+    if (this._isTransitionRunning) {
+      this._queuedTransition = { nextProps, props: this.props };
+      return;
+    }
+
+    let nextScenes = this._computeScenes(this.props, nextProps);
+
+    const indexHasChanged =
+      nextProps.navigation.state.index !== this.props.navigation.state.index;
+
+    if (nextScenes) {
+      this._startTransition(nextProps, nextScenes, indexHasChanged);
+    }
+  }
+
+  _computeScenes = (props, nextProps) => {
     let nextScenes = NavigationScenesReducer(
       this.state.scenes,
       nextProps.navigation.state,
-      this.props.navigation.state,
+      props.navigation.state,
       nextProps.descriptors
     );
 
-    // We are adding one or more scene! We can't handle a case where the number
-    // of scenes increases and one or more of the new scenes is not in the
-    // current navigation state, so we filter anything that's not in the
-    // navigation state right now out and assume it has been transitioned out
-    // properly beforehand.
-    if (nextScenes.length > this.state.scenes.length) {
-      nextScenes = filterNotInState(nextScenes, nextProps.navigation.state);
-    }
-
     if (!nextProps.navigation.state.isTransitioning) {
       nextScenes = filterStale(nextScenes);
     }
@@ -102,22 +109,31 @@ class Transitioner extends React.Component {
       console.log({ nextScenes: nextScenes.map(s => s.descriptor.key) });
     }
 
-    const indexHasChanged =
-      nextProps.navigation.state.index !== this.props.navigation.state.index;
-    if (this._isTransitionRunning) {
-      this._queuedTransition = { nextProps, nextScenes, indexHasChanged };
-      return;
-    }
-
-    this._startTransition(nextProps, nextScenes, indexHasChanged);
-  }
+    return nextScenes;
+  };
 
   _startTransition(nextProps, nextScenes, indexHasChanged) {
+    if (!nextScenes) {
+      console.log({
+        nextScenes,
+        scenes: this.state.scenes.map(s => s.descriptor.navigation.state.routeName),
+        state: nextProps.navigation.state.routes.length,
+        indexHasChanged,
+      })
+      nextScenes = this.state.scenes;
+    }
     const nextState = {
       ...this.state,
       scenes: nextScenes,
     };
 
+    if (__DEV__ && DEBUG) {
+      console.log({
+        startTransition: true,
+        nextScenes: nextScenes.map(s => s.descriptor.key),
+      });
+    }
+
     // grab the position animated value
     const { position } = nextState;
 
@@ -199,7 +215,9 @@ class Transitioner extends React.Component {
     if (__DEV__ && DEBUG) {
       let key = this.props.navigation.state.key;
       let routeName = this.props.navigation.state.routeName;
+
       console.log({
+        render: true,
         [key]: this.state.scenes.map(d => d.key),
         route: routeName,
       });
@@ -253,6 +271,10 @@ class Transitioner extends React.Component {
       scenes,
     };
 
+    if (__DEV__ && DEBUG) {
+      console.log({ onTransitionEnd: true, scenes: scenes.map(s => s.key) });
+    }
+
     this._transitionProps = buildTransitionProps(this.props, nextState);
 
     this.setState(nextState, async () => {
@@ -268,12 +290,23 @@ class Transitioner extends React.Component {
       }
 
       if (this._queuedTransition) {
-        this._startTransition(
-          this._queuedTransition.nextProps,
-          this._queuedTransition.nextScenes,
-          this._queuedTransition.indexHasChanged
+        const indexHasChanged =
+          this._queuedTransition.nextProps.navigation.state.index !==
+          this._queuedTransition.props.navigation.state.index;
+        let nextScenes = this._computeScenes(
+          this._queuedTransition.props,
+          this._queuedTransition.nextProps
         );
+
+        if (nextScenes) {
+          this._startTransition(
+            this._queuedTransition.nextProps,
+            nextScenes,
+            indexHasChanged
+          );
+        }
         this._queuedTransition = null;
+        this._isTransitionRunning = false;
       } else {
         this._isTransitionRunning = false;
       }

From 250950d920eb2088b2c902b73a89edd062c66085 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Mon, 29 Oct 2018 23:24:47 -0700
Subject: [PATCH 2/3] Use the first props change while a transition is occuring
 as the basis of the queued transition - Subsequent changes are essentially
 all ignored except for the last one, which is the target

---
 src/views/Transitioner.js | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/views/Transitioner.js b/src/views/Transitioner.js
index 01f3eb4..5d4de8b 100644
--- a/src/views/Transitioner.js
+++ b/src/views/Transitioner.js
@@ -51,6 +51,7 @@ class Transitioner extends React.Component {
 
     this._prevTransitionProps = null;
     this._transitionProps = buildTransitionProps(props, this.state);
+
     this._isMounted = false;
     this._isTransitionRunning = false;
     this._queuedTransition = null;
@@ -68,8 +69,8 @@ class Transitioner extends React.Component {
 
   // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(nextProps) {
-    if (this._isTransitionRunning) {
-      this._queuedTransition = { nextProps, props: this.props };
+    if (this._isTransitionRunning && !this._queuedTransition) {
+      this._queuedTransition = { prevProps: this.props };
       return;
     }
 
@@ -113,15 +114,6 @@ class Transitioner extends React.Component {
   };
 
   _startTransition(nextProps, nextScenes, indexHasChanged) {
-    if (!nextScenes) {
-      console.log({
-        nextScenes,
-        scenes: this.state.scenes.map(s => s.descriptor.navigation.state.routeName),
-        state: nextProps.navigation.state.routes.length,
-        indexHasChanged,
-      })
-      nextScenes = this.state.scenes;
-    }
     const nextState = {
       ...this.state,
       scenes: nextScenes,
@@ -143,6 +135,7 @@ class Transitioner extends React.Component {
     // compute transitionProps
     this._prevTransitionProps = this._transitionProps;
     this._transitionProps = buildTransitionProps(nextProps, nextState);
+
     let { isTransitioning } = this._transitionProps.navigation.state;
 
     // if the state isn't transitioning that is meant to signal that we should
@@ -291,22 +284,19 @@ class Transitioner extends React.Component {
 
       if (this._queuedTransition) {
         const indexHasChanged =
-          this._queuedTransition.nextProps.navigation.state.index !==
-          this._queuedTransition.props.navigation.state.index;
+          this.props.navigation.state.index !==
+          this._queuedTransition.prevProps.navigation.state.index;
         let nextScenes = this._computeScenes(
-          this._queuedTransition.props,
-          this._queuedTransition.nextProps
+          this._queuedTransition.prevProps,
+          this.props
         );
 
         if (nextScenes) {
-          this._startTransition(
-            this._queuedTransition.nextProps,
-            nextScenes,
-            indexHasChanged
-          );
+          this._startTransition(this.props, nextScenes, indexHasChanged);
+        } else {
+          this._isTransitionRunning = false;
         }
         this._queuedTransition = null;
-        this._isTransitionRunning = false;
       } else {
         this._isTransitionRunning = false;
       }

From 6dcc317542cd5b1aa9cf68a179fc60fdaf576831 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Tue, 30 Oct 2018 09:55:47 -0700
Subject: [PATCH 3/3] Fix lint errors

---
 example/src/SimpleStack.js | 29 +++++++++++++++++------------
 src/views/Transitioner.js  | 20 --------------------
 2 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/example/src/SimpleStack.js b/example/src/SimpleStack.js
index ea3fcf1..93e4b06 100644
--- a/example/src/SimpleStack.js
+++ b/example/src/SimpleStack.js
@@ -9,24 +9,29 @@ const Buttons = withNavigation(props => (
       title="Go to Details"
       onPress={() => props.navigation.navigate('Details')}
     />
-    <Button title="Go and then go to details quick" onPress={() => {
-      let routeName = props.navigation.state.routeName;
-      props.navigation.pop();
-      setTimeout(() => {
-        props.navigation.navigate('Details');
-      }, 100);
-    }} />
+    <Button
+      title="Go and then go to details quick"
+      onPress={() => {
+        props.navigation.pop();
+        setTimeout(() => {
+          props.navigation.navigate('Details');
+        }, 100);
+      }}
+    />
     <Button
       title="Go to Headerless"
       onPress={() => props.navigation.navigate('Headerless')}
     />
     <Button title="Go back" onPress={() => props.navigation.goBack()} />
-    <Button title="Go back quick" onPress={() => {
-      props.navigation.pop();
-      setTimeout(() => {
+    <Button
+      title="Go back quick"
+      onPress={() => {
         props.navigation.pop();
-      }, 100);
-    }} />
+        setTimeout(() => {
+          props.navigation.pop();
+        }, 100);
+      }}
+    />
     <Button
       title="Go back to all examples"
       onPress={() => props.navigation.navigate('Home')}
diff --git a/src/views/Transitioner.js b/src/views/Transitioner.js
index 5d4de8b..2479d92 100644
--- a/src/views/Transitioner.js
+++ b/src/views/Transitioner.js
@@ -336,26 +336,6 @@ function filterStale(scenes) {
   return filtered;
 }
 
-function filterNotInState(scenes, state) {
-  let activeKeys = state.routes.map(r => r.key);
-  let filtered = scenes.filter(scene =>
-    activeKeys.includes(scene.descriptor.key)
-  );
-
-  if (__DEV__ && DEBUG) {
-    console.log({
-      activeKeys,
-      filtered: filtered.map(s => s.descriptor.key),
-      scenes: scenes.map(s => s.descriptor.key),
-    });
-  }
-
-  if (filtered.length === scenes.length) {
-    return scenes;
-  }
-  return filtered;
-}
-
 function isSceneActive(scene) {
   return scene.isActive;
 }