fix: clear options set from a screen when it unmounts. closes #9756

packages/core/src/SceneView.tsx

@@ -20,6 +20,7 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
   getState: () => State;
   setState: (state: State) => void;
   options: object;
+  clearOptions: () => void;
 };
 
 /**
@@ -37,6 +38,7 @@ export default function SceneView<
   getState,
   setState,
   options,
+  clearOptions,
 }: Props<State, ScreenOptions>) {
   const navigatorKeyRef = React.useRef<string | undefined>();
   const getKey = React.useCallback(() => navigatorKeyRef.current, []);
@@ -78,6 +80,12 @@ export default function SceneView<
     isInitialRef.current = false;
   });
 
+  // Clear options set by this screen when it is unmounted
+  React.useEffect(() => {
+    return clearOptions;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const getIsInitial = React.useCallback(() => isInitialRef.current, []);
 
   const context = React.useMemo(

packages/core/src/useDescriptors.tsx

@@ -186,6 +186,17 @@ export default function useDescriptors<
       ...customOptions,
     };
 
+    const clearOptions = () =>
+      setOptions((o) => {
+        if (route.key in o) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { [route.key]: _, ...rest } = o;
+          return rest;
+        }
+
+        return o;
+      });
+
     acc[route.key] = {
       route,
       // @ts-expect-error: it's missing action helpers, fix later
@@ -203,6 +214,7 @@ export default function useDescriptors<
                   getState={getState}
                   setState={setState}
                   options={mergedOptions}
+                  clearOptions={clearOptions}
                 />
               </NavigationRouteContext.Provider>
             </NavigationContext.Provider>