feat: add event for options on container (facebook#8334)

osdnk · web-flow · commit fe3f98eb9cdd · 2020-06-15T17:56:01.000+02:00
diff --git a/packages/core/src/BaseNavigationContainer.tsx b/packages/core/src/BaseNavigationContainer.tsx
@@ -210,13 +210,24 @@ const BaseNavigationContainer = React.forwardRef(
       [emitter]
     );
 
+    const onOptionsChange = React.useCallback(
+      (options) => {
+        emitter.emit({
+          type: 'options',
+          data: { options },
+        });
+      },
+      [emitter]
+    );
+
     const builderContext = React.useMemo(
       () => ({
         addFocusedListener,
         addStateGetter,
         onDispatchAction,
+        onOptionsChange,
       }),
-      [addFocusedListener, addStateGetter, onDispatchAction]
+      [addFocusedListener, addStateGetter, onDispatchAction, onOptionsChange]
     );
 
     const scheduleContext = React.useMemo(
diff --git a/packages/core/src/NavigationBuilderContext.tsx b/packages/core/src/NavigationBuilderContext.tsx
@@ -34,8 +34,10 @@ const NavigationBuilderContext = React.createContext<{
   onRouteFocus?: (key: string) => void;
   onDispatchAction: (action: NavigationAction, noop: boolean) => void;
   addStateGetter?: (key: string, getter: NavigatorStateGetter) => void;
+  onOptionsChange: (options: object) => void;
 }>({
   onDispatchAction: () => undefined,
+  onOptionsChange: () => undefined,
 });
 
 export default NavigationBuilderContext;
diff --git a/packages/core/src/SceneView.tsx b/packages/core/src/SceneView.tsx
@@ -6,12 +6,12 @@ import {
   PartialState,
 } from '@react-navigation/routers';
 import NavigationStateContext from './NavigationStateContext';
-import NavigationContext from './NavigationContext';
-import NavigationRouteContext from './NavigationRouteContext';
 import StaticContainer from './StaticContainer';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
-import { NavigationProp, RouteConfig, EventMapBase } from './types';
 import useOptionsGetters from './useOptionsGetters';
+import NavigationBuilderContext from './NavigationBuilderContext';
+import useFocusEffect from './useFocusEffect';
+import { NavigationProp, RouteConfig, EventMapBase } from './types';
 
 type Props<
   State extends NavigationState,
@@ -45,21 +45,25 @@ export default function SceneView<
   options,
 }: Props<State, ScreenOptions, EventMap>) {
   const navigatorKeyRef = React.useRef<string | undefined>();
+  const { onOptionsChange } = React.useContext(NavigationBuilderContext);
   const getKey = React.useCallback(() => navigatorKeyRef.current, []);
-
   const optionsRef = React.useRef<object | undefined>(options);
-
-  React.useEffect(() => {
-    optionsRef.current = options;
-  }, [options]);
-
   const getOptions = React.useCallback(() => optionsRef.current, []);
 
-  const { addOptionsGetter } = useOptionsGetters({
+  const { addOptionsGetter, hasAnyChildListener } = useOptionsGetters({
     key: route.key,
     getOptions,
   });
 
+  const optionsChange = React.useCallback(() => {
+    optionsRef.current = options;
+    if (!hasAnyChildListener) {
+      onOptionsChange(options);
+    }
+  }, [onOptionsChange, options, hasAnyChildListener]);
+
+  useFocusEffect(optionsChange);
+
   const setKey = React.useCallback((key: string) => {
     navigatorKeyRef.current = key;
   }, []);
@@ -105,28 +109,24 @@ export default function SceneView<
   );
 
   return (
-    <NavigationContext.Provider value={navigation}>
-      <NavigationRouteContext.Provider value={route}>
-        <NavigationStateContext.Provider value={context}>
-          <EnsureSingleNavigator>
-            <StaticContainer
-              name={screen.name}
-              // @ts-ignore
-              render={screen.component || screen.children}
-              navigation={navigation}
-              route={route}
-            >
-              {'component' in screen && screen.component !== undefined ? (
-                // @ts-ignore
-                <screen.component navigation={navigation} route={route} />
-              ) : 'children' in screen && screen.children !== undefined ? (
-                // @ts-ignore
-                screen.children({ navigation, route })
-              ) : null}
-            </StaticContainer>
-          </EnsureSingleNavigator>
-        </NavigationStateContext.Provider>
-      </NavigationRouteContext.Provider>
-    </NavigationContext.Provider>
+    <NavigationStateContext.Provider value={context}>
+      <EnsureSingleNavigator>
+        <StaticContainer
+          name={screen.name}
+          // @ts-ignore
+          render={screen.component || screen.children}
+          navigation={navigation}
+          route={route}
+        >
+          {'component' in screen && screen.component !== undefined ? (
+            // @ts-ignore
+            <screen.component navigation={navigation} route={route} />
+          ) : 'children' in screen && screen.children !== undefined ? (
+            // @ts-ignore
+            screen.children({ navigation, route })
+          ) : null}
+        </StaticContainer>
+      </EnsureSingleNavigator>
+    </NavigationStateContext.Provider>
   );
 }
diff --git a/packages/core/src/__tests__/BaseNavigationContainer.test.tsx b/packages/core/src/__tests__/BaseNavigationContainer.test.tsx
@@ -430,6 +430,65 @@ it('emits state events when the state changes', () => {
   });
 });
 
+it('emits state events when options change', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref}>
+      <TestNavigator>
+        <Screen name="foo" options={{ x: 1 }}>
+          {() => null}
+        </Screen>
+        <Screen name="bar" options={{ y: 2 }}>
+          {() => null}
+        </Screen>
+        <Screen name="baz" options={{ v: 3 }}>
+          {() => (
+            <TestNavigator>
+              <Screen name="foo" options={{ g: 5 }}>
+                {() => null}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const listener = jest.fn();
+
+  render(element).update(element);
+  ref.current?.addListener('options', listener);
+
+  act(() => {
+    ref.current?.navigate('bar');
+  });
+
+  expect(listener.mock.calls[0][0].data.options).toEqual({
+    y: 2,
+  });
+
+  ref.current?.removeListener('options', listener);
+  const listener2 = jest.fn();
+  ref.current?.addListener('options', listener2);
+
+  act(() => {
+    ref.current?.navigate('baz');
+  });
+
+  expect(listener2.mock.calls[0][0].data.options).toEqual({ g: 5 });
+});
+
 it('throws if there is no navigator rendered', () => {
   expect.assertions(1);
 
diff --git a/packages/core/src/types.tsx b/packages/core/src/types.tsx
@@ -37,6 +37,7 @@ export type EventMapCore<State extends NavigationState> = {
   focus: { data: undefined };
   blur: { data: undefined };
   state: { data: { state: State } };
+  options: { data: { options: object } };
 };
 
 export type EventArg<
@@ -422,6 +423,10 @@ export type NavigationContainerEventMap = {
       state: NavigationState;
     };
   };
+  /**
+   * Event which fires when current options changes.
+   */
+  options: { data: { options: object } };
   /**
    * Event which fires when an action is dispatched.
    * Only intended for debugging purposes, don't use it for app logic.
diff --git a/packages/core/src/useDescriptors.tsx b/packages/core/src/useDescriptors.tsx
@@ -20,6 +20,8 @@ import {
   RouteProp,
   EventMapBase,
 } from './types';
+import NavigationContext from './NavigationContext';
+import NavigationRouteContext from './NavigationRouteContext';
 
 type Options<
   State extends NavigationState,
@@ -80,7 +82,9 @@ export default function useDescriptors<
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
   const [options, setOptions] = React.useState<Record<string, object>>({});
-  const { onDispatchAction } = React.useContext(NavigationBuilderContext);
+  const { onDispatchAction, onOptionsChange } = React.useContext(
+    NavigationBuilderContext
+  );
 
   const context = React.useMemo(
     () => ({
@@ -91,6 +95,7 @@ export default function useDescriptors<
       addStateGetter,
       onRouteFocus,
       onDispatchAction,
+      onOptionsChange,
     }),
     [
       addActionListener,
@@ -100,6 +105,7 @@ export default function useDescriptors<
       onAction,
       onDispatchAction,
       onRouteFocus,
+      onOptionsChange,
     ]
   );
 
@@ -145,14 +151,18 @@ export default function useDescriptors<
       render() {
         return (
           <NavigationBuilderContext.Provider key={route.key} value={context}>
-            <SceneView
-              navigation={navigation}
-              route={route}
-              screen={screen}
-              getState={getState}
-              setState={setState}
-              options={routeOptions}
-            />
+            <NavigationContext.Provider value={navigation}>
+              <NavigationRouteContext.Provider value={route}>
+                <SceneView
+                  navigation={navigation}
+                  route={route}
+                  screen={screen}
+                  getState={getState}
+                  setState={setState}
+                  options={routeOptions}
+                />
+              </NavigationRouteContext.Provider>
+            </NavigationContext.Provider>
           </NavigationBuilderContext.Provider>
         );
       },
diff --git a/packages/core/src/useNavigationBuilder.tsx b/packages/core/src/useNavigationBuilder.tsx
@@ -293,7 +293,7 @@ export default function useNavigationBuilder<
   let state =
     // If the state isn't initialized, or stale, use the state we initialized instead
     // The state won't update until there's a change needed in the state we have initalized locally
-    // So it'll be `undefined` or stale untill the first navigation event happens
+    // So it'll be `undefined` or stale until the first navigation event happens
     isStateInitialized(currentState)
       ? (currentState as State)
       : (initializedState as State);
@@ -344,7 +344,7 @@ export default function useNavigationBuilder<
 
   // The up-to-date state will come in next render, but we don't need to wait for it
   // We can't use the outdated state since the screens have changed, which will cause error due to mismatched config
-  // So we override the state objec we return to use the latest state as soon as possible
+  // So we override the state object we return to use the latest state as soon as possible
   state = nextState;
 
   React.useEffect(() => {
diff --git a/packages/core/src/useOptionsGetters.tsx b/packages/core/src/useOptionsGetters.tsx
@@ -11,6 +11,10 @@ export default function useOptionsGetters({
   getOptions?: () => object | undefined;
   getState?: () => NavigationState;
 }) {
+  let [
+    numberOfChildrenListeners,
+    setNumberOfChildrenListeners,
+  ] = React.useState(0);
   const optionsGettersFromChild = React.useRef<
     Record<string, (() => object | undefined | null) | undefined>
   >({});
@@ -55,16 +59,24 @@ export default function useOptionsGetters({
   const addOptionsGetter = React.useCallback(
     (key: string, getter: () => object | undefined | null) => {
       optionsGettersFromChild.current[key] = getter;
+      setNumberOfChildrenListeners((prev) => prev + 1);
 
       return () => {
+        setNumberOfChildrenListeners((prev) => prev - 1);
         optionsGettersFromChild.current[key] = undefined;
       };
     },
     []
   );
 
+  const hasAnyChildListener = React.useMemo(
+    () => numberOfChildrenListeners > 0,
+    [numberOfChildrenListeners]
+  );
+
   return {
     addOptionsGetter,
     getCurrentOptions,
+    hasAnyChildListener,
   };
 }
