@react-navigation/core 6.2.2 → 6.4.0

package/src/useNavigationBuilder.tsx

@@ -19,6 +19,7 @@ import isRecordEqual from './isRecordEqual';
 import NavigationHelpersContext from './NavigationHelpersContext';
 import NavigationRouteContext from './NavigationRouteContext';
 import NavigationStateContext from './NavigationStateContext';
+import PreventRemoveProvider from './PreventRemoveProvider';
 import Screen from './Screen';
 import {
   DefaultNavigatorOptions,
@@ -318,12 +319,13 @@ export default function useNavigationBuilder<
   }
 
   const isStateValid = React.useCallback(
-    (state) => state.type === undefined || state.type === router.type,
+    (state: NavigationState | PartialState<NavigationState>) =>
+      state.type === undefined || state.type === router.type,
     [router.type]
   );
 
   const isStateInitialized = React.useCallback(
-    (state) =>
+    (state: NavigationState | PartialState<NavigationState> | undefined) =>
       state !== undefined && state.stale === false && isStateValid(state),
     [isStateValid]
   );
@@ -690,9 +692,11 @@ export default function useNavigationBuilder<
     descriptors,
   });
 
-  const NavigationContent = useComponent(NavigationHelpersContext.Provider, {
-    value: navigation,
-  });
+  const NavigationContent = useComponent((children: React.ReactNode) => (
+    <NavigationHelpersContext.Provider value={navigation}>
+      <PreventRemoveProvider>{children}</PreventRemoveProvider>
+    </NavigationHelpersContext.Provider>
+  ));
 
   return {
     state,

package/src/usePreventRemove.tsx

@@ -0,0 +1,51 @@
+import type { NavigationAction } from '@react-navigation/routers';
+import { nanoid } from 'nanoid/non-secure';
+import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
+
+import type { EventListenerCallback, EventMapCore } from './types';
+import useNavigation from './useNavigation';
+import usePreventRemoveContext from './usePreventRemoveContext';
+import useRoute from './useRoute';
+
+/**
+ * Hook to prevent screen from being removed. Can be used to prevent users from leaving the screen.
+ *
+ * @param preventRemove Boolean indicating whether to prevent screen from being removed.
+ * @param callback Function which is executed when screen was prevented from being removed.
+ */
+export default function usePreventRemove(
+  preventRemove: boolean,
+  callback: (options: { data: { action: NavigationAction } }) => void
+) {
+  const [id] = React.useState(() => nanoid());
+
+  const navigation = useNavigation();
+  const { key: routeKey } = useRoute();
+
+  const { setPreventRemove } = usePreventRemoveContext();
+
+  React.useEffect(() => {
+    setPreventRemove(id, routeKey, preventRemove);
+    return () => {
+      setPreventRemove(id, routeKey, false);
+    };
+  }, [setPreventRemove, id, routeKey, preventRemove]);
+
+  const beforeRemoveListener = useLatestCallback<
+    EventListenerCallback<EventMapCore<any>, 'beforeRemove'>
+  >((e) => {
+    if (!preventRemove) {
+      return;
+    }
+
+    e.preventDefault();
+
+    callback({ data: e.data });
+  });
+
+  React.useEffect(
+    () => navigation?.addListener('beforeRemove', beforeRemoveListener),
+    [navigation, beforeRemoveListener]
+  );
+}

package/src/usePreventRemoveContext.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import PreventRemoveContext from './PreventRemoveContext';
+
+export default function usePreventRemoveContext() {
+  const value = React.useContext(PreventRemoveContext);
+
+  if (value == null) {
+    throw new Error(
+      "Couldn't find the prevent remove context. Is your component inside NavigationContent?"
+    );
+  }
+
+  return value;
+}