refactor: store more info about the transitions in the state

src/__tests__/NavigationStateUtils-test.js

@@ -8,7 +8,6 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.get(state, 'a')).toEqual({
       key: 'a',
@@ -21,7 +20,6 @@ describe('StateUtils', () => {
     const state = {
       index: 1,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.indexOf(state, 'a')).toBe(0);
     expect(NavigationStateUtils.indexOf(state, 'b')).toBe(1);
@@ -32,7 +30,6 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.has(state, 'b')).toBe(true);
     expect(NavigationStateUtils.has(state, 'c')).toBe(false);
@@ -43,11 +40,10 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 1,
-      isTransitioning: false,
+
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
     };
     expect(NavigationStateUtils.push(state, { key: 'b', routeName })).toEqual(
@@ -59,7 +55,6 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
     };
     expect(() =>
       NavigationStateUtils.push(state, { key: 'a', routeName })
@@ -71,12 +66,10 @@ describe('StateUtils', () => {
     const state = {
       index: 1,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 0,
       routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.pop(state)).toEqual(newState);
   });
@@ -85,7 +78,6 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.pop(state)).toBe(state);
   });
@@ -95,12 +87,10 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 1,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.jumpToIndex(state, 0)).toBe(state);
     expect(NavigationStateUtils.jumpToIndex(state, 1)).toEqual(newState);
@@ -110,7 +100,6 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(() => NavigationStateUtils.jumpToIndex(state, 2)).toThrow(
       'invalid index 2 to jump to'
@@ -121,12 +110,10 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 1,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.jumpTo(state, 'a')).toBe(state);
     expect(NavigationStateUtils.jumpTo(state, 'b')).toEqual(newState);
@@ -136,7 +123,6 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(() => NavigationStateUtils.jumpTo(state, 'c')).toThrow(
       'invalid index -1 to jump to'
@@ -147,12 +133,10 @@ describe('StateUtils', () => {
     const state = {
       index: 1,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.back(state)).toEqual(newState);
     expect(NavigationStateUtils.back(newState)).toBe(newState);
@@ -162,12 +146,10 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 1,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(NavigationStateUtils.forward(state)).toEqual(newState);
     expect(NavigationStateUtils.forward(newState)).toBe(newState);
@@ -178,12 +160,10 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 1,
       routes: [{ key: 'a', routeName }, { key: 'c', routeName }],
-      isTransitioning: false,
     };
     expect(
       NavigationStateUtils.replaceAt(state, 'b', { key: 'c', routeName })
@@ -194,12 +174,10 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 1,
       routes: [{ key: 'a', routeName }, { key: 'c', routeName }],
-      isTransitioning: false,
     };
     expect(
       NavigationStateUtils.replaceAtIndex(state, 1, { key: 'c', routeName })
@@ -210,7 +188,6 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     expect(
       NavigationStateUtils.replaceAtIndex(state, 1, state.routes[1])
@@ -222,12 +199,10 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 1,
       routes: [{ key: 'x', routeName }, { key: 'y', routeName }],
-      isTransitioning: false,
     };
     expect(
       NavigationStateUtils.reset(state, [
@@ -245,12 +220,10 @@ describe('StateUtils', () => {
     const state = {
       index: 0,
       routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
-      isTransitioning: false,
     };
     const newState = {
       index: 0,
       routes: [{ key: 'x', routeName }, { key: 'y', routeName }],
-      isTransitioning: false,
     };
     expect(
       NavigationStateUtils.reset(

src/__tests__/getChildEventSubscriber-test.js

@@ -18,7 +18,6 @@ it('child action events only flow when focused', () => {
     routeName: 'FooRoute',
     routes: [{ key: 'key0' }, { key: 'key1' }],
     index: 0,
-    isTransitioning: false,
   };
   const focusedTestState = {
     ...testState,
@@ -76,20 +75,21 @@ it('grandchildren subscription', () => {
         key: 'parent',
         routes: [{ key: 'key0' }, { key: 'key1' }],
         index: 1,
-        isTransitioning: false,
       },
     ],
+    transitions: {
+      pushing: [],
+      popping: ['parent'],
+    },
     index: 0,
-    isTransitioning: false,
   };
   const parentTransitionState = {
     ...parentBlurState,
     index: 1,
-    isTransitioning: true,
+    transitions: { pushing: ['key1'], popping: [] },
   };
   const parentFocusState = {
     ...parentTransitionState,
-    isTransitioning: false,
   };
   const childActionHandler = jest.fn();
   const childWillFocusHandler = jest.fn();
@@ -136,13 +136,16 @@ it('grandchildren transitions', () => {
     .addListener;
   const makeFakeState = (childIndex, childIsTransitioning) => ({
     index: 1,
-    isTransitioning: false,
+
     routes: [
       { key: 'nothing' },
       {
         key: 'parent',
         index: childIndex,
-        isTransitioning: childIsTransitioning,
+        transitions: {
+          pushing: [],
+          popping: childIsTransitioning ? ['key2'] : [],
+        },
         routes: [{ key: 'key0' }, { key: 'key1' }, { key: 'key2' }],
       },
     ],
@@ -229,13 +232,16 @@ it('grandchildren pass through transitions', () => {
     .addListener;
   const makeFakeState = (childIndex, childIsTransitioning) => ({
     index: childIndex,
-    isTransitioning: childIsTransitioning,
+    transitions: {
+      pushing: [],
+      popping: childIsTransitioning ? ['key2'] : [],
+    },
     routes: [
       { key: 'nothing' },
       {
         key: 'parent',
         index: 1,
-        isTransitioning: false,
+
         routes: [{ key: 'key0' }, { key: 'key1' }, { key: 'key2' }],
       },
     ].slice(0, childIndex + 1),
@@ -322,7 +328,6 @@ it('child focus with transition', () => {
     routeName: 'FooRoute',
     routes: [{ key: 'key0' }, { key: 'key1' }],
     index: 0,
-    isTransitioning: false,
   };
   const childWillFocusHandler = jest.fn();
   const childDidFocusHandler = jest.fn();
@@ -345,7 +350,7 @@ it('child focus with transition', () => {
     state: {
       ...testState,
       index: 1,
-      isTransitioning: true,
+      transitions: { pushing: [], popping: ['key1'] },
     },
   });
   expect(childWillFocusHandler.mock.calls.length).toBe(1);
@@ -355,12 +360,11 @@ it('child focus with transition', () => {
     lastState: {
       ...testState,
       index: 1,
-      isTransitioning: true,
+      transitions: { pushing: [], popping: ['key1'] },
     },
     state: {
       ...testState,
       index: 1,
-      isTransitioning: false,
     },
   });
   expect(childDidFocusHandler.mock.calls.length).toBe(1);
@@ -370,12 +374,11 @@ it('child focus with transition', () => {
     lastState: {
       ...testState,
       index: 1,
-      isTransitioning: false,
     },
     state: {
       ...testState,
       index: 0,
-      isTransitioning: true,
+      transitions: { pushing: [], popping: ['key1'] },
     },
   });
   expect(childWillBlurHandler.mock.calls.length).toBe(1);
@@ -385,12 +388,11 @@ it('child focus with transition', () => {
     lastState: {
       ...testState,
       index: 0,
-      isTransitioning: true,
+      transitions: { pushing: [], popping: ['key1'] },
     },
     state: {
       ...testState,
       index: 0,
-      isTransitioning: false,
     },
   });
   expect(childDidBlurHandler.mock.calls.length).toBe(1);
@@ -415,7 +417,6 @@ it('child focus with immediate transition', () => {
     routeName: 'FooRoute',
     routes: [{ key: 'key0' }, { key: 'key1' }],
     index: 0,
-    isTransitioning: false,
   };
   const childWillFocusHandler = jest.fn();
   const childDidFocusHandler = jest.fn();
@@ -491,12 +492,11 @@ it('immediate back with uncompleted transition will focus first screen again', (
     state: {
       index: 1,
       routes: [{ key: 'key0' }, { key: 'key1' }],
-      isTransitioning: true,
+      transitions: { pushing: [], popping: ['key1'] },
     },
     lastState: {
       index: 0,
       routes: [{ key: 'key0' }],
-      isTransitioning: false,
     },
     action: { type: 'Any action, does not matter here' },
   });
@@ -509,12 +509,12 @@ it('immediate back with uncompleted transition will focus first screen again', (
     state: {
       index: 0,
       routes: [{ key: 'key0' }],
-      isTransitioning: true,
+      transitions: { pushing: [], popping: ['key0'] },
     },
     lastState: {
       index: 1,
       routes: [{ key: 'key0' }, { key: 'key1' }],
-      isTransitioning: true,
+      transitions: { pushing: [], popping: ['key1'] },
     },
     action: { type: 'Any action, does not matter here' },
   });
@@ -527,12 +527,11 @@ it('immediate back with uncompleted transition will focus first screen again', (
     state: {
       index: 0,
       routes: [{ key: 'key0' }],
-      isTransitioning: false,
     },
     lastState: {
       index: 0,
       routes: [{ key: 'key0' }],
-      isTransitioning: true,
+      transitions: { pushing: [], popping: ['key0'] },
     },
     action: { type: 'Any action, does not matter here' },
   });

src/getChildEventSubscriber.js

@@ -98,7 +98,10 @@ export default function getChildEventSubscriber(
         action,
         type: eventName,
       };
-      const isTransitioning = !!state && state.isTransitioning;
+      const isTransitioning =
+        !!state &&
+        state.transitions &&
+        (state.transitions.pushing.length || state.transitions.popping.length);
 
       const previouslylastFocusEvent = lastFocusEvent;
 

src/getChildrenNavigationCache.js

@@ -7,7 +7,7 @@ export default function getChildrenNavigationCache(navigation) {
     navigation._childrenNavigation || (navigation._childrenNavigation = {});
   let childKeys = navigation.state.routes.map(route => route.key);
   Object.keys(childrenNavigationCache).forEach(cacheKey => {
-    if (!childKeys.includes(cacheKey) && !navigation.state.isTransitioning) {
+    if (!childKeys.includes(cacheKey)) {
       delete childrenNavigationCache[cacheKey];
     }
   });