@react-navigation/native 8.0.0-alpha.32 → 8.0.0-alpha.34

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -9,13 +9,13 @@ import {
 
 export interface NativeProps extends ViewProps {
   name: string;
-  variant?: string;
+  variant?: string | undefined;
   weight?: CodegenTypes.WithDefault<
     0 | 100 | 200 | 300 | 400 | 500 | 600 | 700,
     0
   >;
   size: CodegenTypes.Float;
-  color?: ColorValue;
+  color?: ColorValue | undefined;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/native/SFSymbolViewNativeComponent.ts

@@ -10,16 +10,16 @@ import {
 export interface NativeProps extends ViewProps {
   name: string;
   size: CodegenTypes.Float;
-  color?: ColorValue;
+  color?: ColorValue | undefined;
   weight: CodegenTypes.Int32;
   scale: string;
   variableValue: CodegenTypes.Float;
   variableValueMode: string;
   colorRenderingMode: string;
   renderingMode: string;
-  colorPrimary?: ColorValue;
-  colorSecondary?: ColorValue;
-  colorTertiary?: ColorValue;
+  colorPrimary?: ColorValue | undefined;
+  colorSecondary?: ColorValue | undefined;
+  colorTertiary?: ColorValue | undefined;
   effect: string;
   effectRepeat: string;
   effectRepeatCount: CodegenTypes.Int32;

package/src/useBackButton.native.tsx

@@ -9,8 +9,10 @@ export function useBackButton(
   ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>
 ) {
   React.useEffect(() => {
+    // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
     const subscription = BackHandler.addEventListener(
       'hardwareBackPress',
+      // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
       () => {
         const navigation = ref.current;
 

package/src/useLinkProps.tsx

@@ -15,15 +15,15 @@ export type LinkProps<
   RouteName extends keyof ParamList = keyof ParamList,
 > =
   | ({
-      href?: string;
-      action?: NavigationAction;
+      href?: string | undefined;
+      action?: NavigationAction | undefined;
     } & (RouteName extends unknown
       ? undefined extends ParamList[RouteName]
-        ? { screen: RouteName; params?: ParamList[RouteName] }
+        ? { screen: RouteName; params?: ParamList[RouteName] | undefined }
         : { screen: RouteName; params: ParamList[RouteName] }
       : never))
   | {
-      href?: string;
+      href?: string | undefined;
       action: NavigationAction;
       screen?: undefined;
       params?: undefined;

package/src/useLinking.tsx

@@ -1,4 +1,5 @@
 import {
+  CommonActions,
   findFocusedRoute,
   getActionFromState as getActionFromStateDefault,
   getPathFromState as getPathFromStateDefault,
@@ -18,6 +19,12 @@ import type { Thenable } from './useThenable';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
+/**
+ * History delta already applied by the browser when handling `popstate`
+ * The value 'replace' means the delta is unknown, so we can only replace
+ */
+type PopStateDelta = number | 'replace';
+
 const getRoutesUntilIndex = (state: NavigationState) =>
   state.routes.slice(0, state.index + 1);
 
@@ -130,10 +137,14 @@ const isPoppingLastEntry = (
  */
 export const series = (cb: () => Promise<void>) => {
   let queue = Promise.resolve();
+
   const callback = () => {
     // eslint-disable-next-line promise/no-callback-in-promise
-    queue = queue.then(cb);
+    queue = queue.then(cb).catch((e) => {
+      console.error(e);
+    });
   };
+
   return callback;
 };
 
@@ -256,7 +267,9 @@ export function useLinking<ParamList extends ParamListBase>(
 
   const previousIndexRef = React.useRef<number | undefined>(undefined);
   const previousStateRef = React.useRef<NavigationState | undefined>(undefined);
-  const pendingPopStatePathRef = React.useRef<string | undefined>(undefined);
+  const pendingPopStateDeltaRef = React.useRef<PopStateDelta | undefined>(
+    undefined
+  );
 
   React.useEffect(() => {
     if (!history) {
@@ -280,7 +293,88 @@ export function useLinking<ParamList extends ParamListBase>(
       const previousIndex = previousIndexRef.current ?? 0;
 
       previousIndexRef.current = index;
-      pendingPopStatePathRef.current = path;
+
+      const rollbackHistory = () => {
+        const delta = previousIndex - index;
+
+        if (delta === 0) {
+          return;
+        }
+
+        history
+          .go(delta)
+          // eslint-disable-next-line promise/always-return
+          ?.then(() => {
+            previousIndexRef.current = history.index;
+          })
+          .catch(() => {
+            // The navigation was interrupted
+          });
+      };
+
+      const rollbackHistoryIfPrevented = (
+        callback: () => void,
+        pendingDelta: PopStateDelta
+      ) => {
+        let removePrevented = false;
+        let actionChangedState = false;
+
+        const unsubscribeEvent = navigation.addListener(
+          '__unsafe_event__',
+          (e) => {
+            if (e.data.type === 'beforeRemove' && e.data.defaultPrevented) {
+              removePrevented = true;
+            }
+          }
+        );
+
+        // After preventing remove, user may synchronously continue navigation
+        // This is common when showing a confirmation dialog
+        // If this action produces an update, we don't want to rollback the history
+        const unsubscribeAction = navigation.addListener(
+          '__unsafe_action__',
+          (e) => {
+            if (!e.data.noop) {
+              actionChangedState = true;
+            }
+          }
+        );
+
+        try {
+          callback();
+        } finally {
+          unsubscribeEvent();
+          unsubscribeAction();
+        }
+
+        if (actionChangedState) {
+          // The change may be committed later, e.g. with transitions
+          // Remember the delta so it can be subtracted when syncing the commit
+          pendingPopStateDeltaRef.current = pendingDelta;
+        } else if (removePrevented) {
+          rollbackHistory();
+        }
+      };
+
+      const dispatch = (
+        action: Parameters<typeof navigation.dispatch>[0],
+        pendingDelta: PopStateDelta
+      ) => {
+        rollbackHistoryIfPrevented(
+          () => navigation.dispatch(action),
+          pendingDelta
+        );
+      };
+
+      const resetRoot = (
+        state: Parameters<typeof navigation.resetRoot>[0],
+        pendingDelta: PopStateDelta
+      ) => {
+        rollbackHistoryIfPrevented(
+          () => navigation.resetRoot(state),
+          pendingDelta
+        );
+      };
 
       // When browser back/forward is clicked, we first need to check if state object for this index exists
       // If it does we'll reset to that state object
@@ -301,12 +395,25 @@ export function useLinking<ParamList extends ParamListBase>(
           recordFocused &&
           isPoppingLastEntry(currentFocused, recordFocused)
         ) {
+          const pending = pendingPopStateDeltaRef.current;
+
           // If we detect that the state change is popping the last entry
           // Dispatch a back action instead of resetting to the state
           // This makes sure changes to history state since the entry was added don't get lost
-          navigation.goBack();
+          dispatch(
+            CommonActions.goBack(),
+            // Stack on any delta from a previous `popstate` that hasn't committed yet
+            pending === 'replace' ? 'replace' : (pending ?? 0) - 1
+          );
         } else {
-          navigation.resetRoot(record.state);
+          // The browser already moved from the current state to the record's state
+          resetRoot(
+            record.state,
+            currentFocused && recordFocused
+              ? getTotalHistoryLength(recordFocused) -
+                  getTotalHistoryLength(currentFocused)
+              : 'replace'
+          );
         }
 
         return;
@@ -343,7 +450,7 @@ export function useLinking<ParamList extends ParamListBase>(
 
           if (action !== undefined) {
             try {
-              navigation.dispatch(action);
+              dispatch(action, 'replace');
             } catch (e) {
               // Ignore any errors from deep linking.
               // This could happen in case of malformed links, navigation object not being initialized etc.
@@ -356,14 +463,14 @@ export function useLinking<ParamList extends ParamListBase>(
               );
             }
           } else {
-            navigation.resetRoot(state);
+            resetRoot(state, 'replace');
           }
         } else {
-          navigation.resetRoot(state);
+          resetRoot(state, 'replace');
         }
       } else {
         // if current path didn't return any state, we should revert to initial state
-        navigation.resetRoot(state);
+        resetRoot(state, 'replace');
       }
     });
   }, [enabled, history, ref, validateRoutesNotExistInRootState]);
@@ -448,7 +555,7 @@ export function useLinking<ParamList extends ParamListBase>(
       }
     }
 
-    const onStateChange = async () => {
+    const onUpdate = async () => {
       const navigation = ref.current;
 
       if (!navigation || !enabled) {
@@ -463,12 +570,18 @@ export function useLinking<ParamList extends ParamListBase>(
         return;
       }
 
-      const pendingPath = pendingPopStatePathRef.current;
+      // Skip if the state hasn't changed since we last synced it
+      if (previousState === state) {
+        return;
+      }
+
       const route = findFocusedRoute(state);
       const path = getPathForRoute(route, state);
 
+      const pendingPopStateDelta = pendingPopStateDeltaRef.current;
+
       previousStateRef.current = state;
-      pendingPopStatePathRef.current = undefined;
+      pendingPopStateDeltaRef.current = undefined;
 
       // To detect the kind of state change, we need to:
       // - Find the common focused navigation state in previous and current state
@@ -482,13 +595,14 @@ export function useLinking<ParamList extends ParamListBase>(
       if (
         previousFocusedState &&
         focusedState &&
-        // We should only handle push/pop if path changed from what was in last `popstate`
-        // Otherwise it's likely a change triggered by `popstate`
-        path !== pendingPath
+        // If the delta from `popstate` is unknown, we can only replace
+        pendingPopStateDelta !== 'replace'
       ) {
         const historyDelta =
           getTotalHistoryLength(focusedState) -
-          getTotalHistoryLength(previousFocusedState);
+          getTotalHistoryLength(previousFocusedState) -
+          // Subtract the delta already applied by the browser to sync only the remaining changes
+          (pendingPopStateDelta ?? 0);
 
         if (historyDelta > 0) {
           // If history length is increased, we should pushState
@@ -534,10 +648,12 @@ export function useLinking<ParamList extends ParamListBase>(
       previousIndexRef.current = history.index;
     };
 
-    // We debounce onStateChange coz we don't want multiple state changes to be handled at one time
+    // We debounce onUpdate coz we don't want multiple state changes to be handled at one time
     // This could happen since `history.go(n)` is asynchronous
     // If `pushState` or `replaceState` were called before `history.go(n)` completes, it'll mess stuff up
-    return ref.current?.addListener('state', series(onStateChange));
+    const handleUpdate = series(onUpdate);
+
+    return ref.current?.addListener('state', handleUpdate);
   }, [enabled, history, ref]);
 
   return {