refactor: rework history stack integration (facebook#8367)

The PR reworks history integration to better integrate with browser's history stack and supports nested navigation more reliably:

- On each navigation, save the navigation in memory and use it to reset the state when user presses back/forward
- Improve heuristic to determine if we should do a push, replace or back

This closes facebook#8230, closes facebook#8284 and closes facebook#8344

Author: satya164

packages/core/src/isArrayEqual.tsx

@@ -0,0 +1,7 @@
+/**
+ * Compare two arrays with primitive values as the content.
+ * We need to make sure that both values and order match.
+ */
+export default function isArrayEqual(a: any[], b: any[]) {
+  return a.length === b.length && a.every((it, index) => it === b[index]);
+}

packages/core/src/useNavigationBuilder.tsx

@@ -34,6 +34,7 @@ import useStateGetters from './useStateGetters';
 import useOnGetState from './useOnGetState';
 import useScheduleUpdate from './useScheduleUpdate';
 import useCurrentRender from './useCurrentRender';
+import isArrayEqual from './isArrayEqual';
 
 // This is to make TypeScript compiler happy
 // eslint-disable-next-line babel/no-unused-expressions
@@ -48,13 +49,6 @@ type NavigatorRoute = {
   };
 };
 
-/**
- * Compare two arrays with primitive values as the content.
- * We need to make sure that both values and order match.
- */
-const isArrayEqual = (a: any[], b: any[]) =>
-  a.length === b.length && a.every((it, index) => it === b[index]);
-
 /**
  * Extract route config object from React children elements.
  *

packages/core/src/useOnGetState.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { NavigationState } from '@react-navigation/routers';
 import NavigationBuilderContext from './NavigationBuilderContext';
 import NavigationRouteContext from './NavigationRouteContext';
+import isArrayEqual from './isArrayEqual';
 
 export default function useOnGetState({
   getStateForRoute,
@@ -16,13 +17,23 @@ export default function useOnGetState({
 
   const getRehydratedState = React.useCallback(() => {
     const state = getState();
-    return {
-      ...state,
-      routes: state.routes.map((route) => ({
-        ...route,
-        state: getStateForRoute(route.key),
-      })),
-    };
+
+    // Avoid returning new route objects if we don't need to
+    const routes = state.routes.map((route) => {
+      const childState = getStateForRoute(route.key);
+
+      if (route.state === childState) {
+        return route;
+      }
+
+      return { ...route, state: childState };
+    });
+
+    if (isArrayEqual(state.routes, routes)) {
+      return state;
+    }
+
+    return { ...state, routes };
   }, [getState, getStateForRoute]);
 
   React.useEffect(() => {

packages/native/package.json

@@ -33,7 +33,8 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.9.0"
+    "@react-navigation/core": "^5.9.0",
+    "nanoid": "^3.1.9"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.14.3",

packages/native/src/__mocks__/window.tsx

@@ -0,0 +1,69 @@
+const location = new URL('', 'http://example.com');
+
+let listeners: (() => void)[] = [];
+let entries = [{ state: null, href: location.href }];
+let index = 0;
+
+let currentState: any = null;
+
+const history = {
+  get state() {
+    return currentState;
+  },
+
+  pushState(state: any, _: string, path: string) {
+    Object.assign(location, new URL(path, location.origin));
+
+    currentState = state;
+    entries = entries.slice(0, index + 1);
+    entries.push({ state, href: location.href });
+    index = entries.length - 1;
+  },
+
+  replaceState(state: any, _: string, path: string) {
+    Object.assign(location, new URL(path, location.origin));
+
+    currentState = state;
+    entries[index] = { state, href: location.href };
+  },
+
+  go(n: number) {
+    setTimeout(() => {
+      if (
+        (n > 0 && n < entries.length - index) ||
+        (n < 0 && Math.abs(n) <= index)
+      ) {
+        index += n;
+        Object.assign(location, new URL(entries[index].href));
+        listeners.forEach((cb) => cb);
+      }
+    }, 0);
+  },
+
+  back() {
+    this.go(-1);
+  },
+
+  forward() {
+    this.go(1);
+  },
+};
+
+const addEventListener = (type: 'popstate', listener: () => void) => {
+  if (type === 'popstate') {
+    listeners.push(listener);
+  }
+};
+
+const removeEventListener = (type: 'popstate', listener: () => void) => {
+  if (type === 'popstate') {
+    listeners = listeners.filter((cb) => cb !== listener);
+  }
+};
+
+export default {
+  location,
+  history,
+  addEventListener,
+  removeEventListener,
+};

packages/native/src/__tests__/NavigationContainer.test.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import {
+  useNavigationBuilder,
+  createNavigatorFactory,
+  StackRouter,
+  TabRouter,
+  NavigationHelpersContext,
+  NavigationContainerRef,
+} from '@react-navigation/core';
+import { act, render } from 'react-native-testing-library';
+import NavigationContainer from '../NavigationContainer';
+import window from '../__mocks__/window';
+
+// @ts-ignore
+global.window = window;
+
+// We want to use the web version of useLinking
+jest.mock('../useLinking', () => require('../useLinking.tsx').default);
+
+it('integrates with the history API', () => {
+  jest.useFakeTimers();
+
+  const createStackNavigator = createNavigatorFactory((props: any) => {
+    const { navigation, state, descriptors } = useNavigationBuilder(
+      StackRouter,
+      props
+    );
+
+    return (
+      <NavigationHelpersContext.Provider value={navigation}>
+        {state.routes.map((route, i) => (
+          <div key={route.key} aria-current={state.index === i || undefined}>
+            {descriptors[route.key].render()}
+          </div>
+        ))}
+      </NavigationHelpersContext.Provider>
+    );
+  });
+
+  const createTabNavigator = createNavigatorFactory((props: any) => {
+    const { navigation, state, descriptors } = useNavigationBuilder(
+      TabRouter,
+      props
+    );
+
+    return (
+      <NavigationHelpersContext.Provider value={navigation}>
+        {state.routes.map((route, i) => (
+          <div key={route.key} aria-current={state.index === i || undefined}>
+            {descriptors[route.key].render()}
+          </div>
+        ))}
+      </NavigationHelpersContext.Provider>
+    );
+  });
+
+  const Stack = createStackNavigator();
+  const Tab = createTabNavigator();
+
+  const TestScreen = ({ route }: any): any =>
+    `${route.name} ${JSON.stringify(route.params)}`;
+
+  const linking = {
+    prefixes: [],
+    config: {
+      Home: {
+        path: '',
+        initialRouteName: 'Feed',
+        screens: {
+          Profile: ':user',
+          Settings: 'edit',
+          Updates: 'updates',
+          Feed: 'feed',
+        },
+      },
+      Chat: 'chat',
+    },
+  };
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  render(
+    <NavigationContainer ref={navigation} linking={linking}>
+      <Tab.Navigator>
+        <Tab.Screen name="Home">
+          {() => (
+            <Stack.Navigator initialRouteName="Feed">
+              <Stack.Screen name="Profile" component={TestScreen} />
+              <Stack.Screen name="Settings" component={TestScreen} />
+              <Stack.Screen name="Feed" component={TestScreen} />
+              <Stack.Screen name="Updates" component={TestScreen} />
+            </Stack.Navigator>
+          )}
+        </Tab.Screen>
+        <Tab.Screen name="Chat" component={TestScreen} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+
+  expect(window.location.pathname).toBe('/feed');
+
+  act(() => navigation.current?.navigate('Profile', { user: 'jane' }));
+
+  expect(window.location.pathname).toBe('/jane');
+
+  act(() => navigation.current?.navigate('Updates'));
+
+  expect(window.location.pathname).toBe('/updates');
+
+  act(() => navigation.current?.goBack());
+
+  jest.runAllTimers();
+
+  expect(window.location.pathname).toBe('/jane');
+
+  act(() => {
+    window.history.back();
+    jest.runAllTimers();
+  });
+
+  expect(window.location.pathname).toBe('/feed');
+
+  act(() => {
+    window.history.forward();
+    jest.runAllTimers();
+  });
+
+  expect(window.location.pathname).toBe('/jane');
+
+  act(() => navigation.current?.navigate('Settings'));
+
+  expect(window.location.pathname).toBe('/edit');
+
+  act(() => {
+    window.history.go(-2);
+    jest.runAllTimers();
+  });
+
+  expect(window.location.pathname).toBe('/feed');
+
+  act(() => navigation.current?.navigate('Settings'));
+  act(() => navigation.current?.navigate('Chat'));
+
+  expect(window.location.pathname).toBe('/chat');
+
+  act(() => navigation.current?.navigate('Home'));
+
+  expect(window.location.pathname).toBe('/edit');
+});