refactor: split into more hooks

src/NavigationBuilderContext.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import {
-  NavigationHelpers,
-  NavigationAction,
-  OnActionListener,
-  NavigationState,
-} from './types';
+import { NavigationHelpers, NavigationAction, NavigationState } from './types';
+
+export type ChildActionListener = (
+  action: NavigationAction,
+  sourceRouteKey?: string
+) => boolean;
 
 const NavigationBuilderContext = React.createContext<{
   helpers?: NavigationHelpers;
   onAction?: (action: NavigationAction, sourceNavigatorKey?: string) => boolean;
-  registerListener?: (listener: OnActionListener) => void;
-  unregisterListener?: (listener: OnActionListener) => void;
+  addListener?: (listener: ChildActionListener) => void;
+  removeListener?: (listener: ChildActionListener) => void;
   onChildUpdate?: (
     state: NavigationState,
     focus: boolean,

src/types.tsx

@@ -46,11 +46,6 @@ export type NavigationAction = {
   type: string;
 };
 
-export type OnActionListener = (
-  action: NavigationAction,
-  sourceNavigatorKey?: string
-) => boolean;
-
 export type ActionCreators<Action extends NavigationAction = CommonAction> = {
   [key: string]: (...args: any) => Action;
 };

src/useChildActionListeners.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ChildActionListener } from './NavigationBuilderContext';
+
+export default function useChildActionListeners() {
+  const { current: listeners } = React.useRef<ChildActionListener[]>([]);
+
+  const addListener = React.useCallback(
+    (listener: ChildActionListener) => {
+      listeners.push(listener);
+    },
+    [listeners]
+  );
+
+  const removeListener = React.useCallback(
+    (listener: ChildActionListener) => {
+      const index = listeners.indexOf(listener);
+
+      listeners.splice(index, 1);
+    },
+    [listeners]
+  );
+
+  return {
+    listeners,
+    addListener,
+    removeListener,
+  };
+}

src/useDescriptors.tsx

@@ -5,12 +5,13 @@ import {
   NavigationAction,
   NavigationHelpers,
   NavigationState,
-  OnActionListener,
   ParamListBase,
   ScreenProps,
 } from './types';
 import SceneView from './SceneView';
-import NavigationBuilderContext from './NavigationBuilderContext';
+import NavigationBuilderContext, {
+  ChildActionListener,
+} from './NavigationBuilderContext';
 
 type Options = {
   state: NavigationState | PartialState;
@@ -19,8 +20,8 @@ type Options = {
   onAction: (action: NavigationAction, sourceNavigatorKey?: string) => boolean;
   getState: () => NavigationState;
   setState: (state: NavigationState) => void;
-  registerListener: (listener: OnActionListener) => void;
-  unregisterListener: (listener: OnActionListener) => void;
+  addListener: (listener: ChildActionListener) => void;
+  removeListener: (listener: ChildActionListener) => void;
   onChildUpdate: (
     state: NavigationState,
     focus: boolean,
@@ -37,19 +38,19 @@ export default function useDescriptors({
   onAction,
   getState,
   setState,
-  registerListener,
-  unregisterListener,
+  addListener,
+  removeListener,
   onChildUpdate,
 }: Options) {
   const context = React.useMemo(
     () => ({
       helpers,
       onAction,
-      registerListener,
-      unregisterListener,
+      addListener,
+      removeListener,
       onChildUpdate,
     }),
-    [helpers, onAction, onChildUpdate, registerListener, unregisterListener]
+    [helpers, onAction, onChildUpdate, addListener, removeListener]
   );
 
   return state.routes.reduce(

src/useNavigationBuilder.tsx

@@ -5,13 +5,9 @@ import useRegisterNavigator from './useRegisterNavigator';
 import useDescriptors from './useDescriptors';
 import useNavigationHelpers from './useNavigationHelpers';
 import useOnAction from './useOnAction';
-import {
-  Router,
-  NavigationState,
-  ScreenProps,
-  OnActionListener,
-} from './types';
-import useChildrenActionHelper from './useChildrenActionHelper';
+import { Router, NavigationState, ScreenProps } from './types';
+import useOnChildUpdate from './useOnChildUpdate';
+import useChildActionListeners from './useChildActionListeners';
 
 type Options = {
   initialRouteName?: string;
@@ -99,9 +95,11 @@ export default function useNavigationBuilder(
     [getCurrentState, router.getRehydratedState, router.getInitialState]
   );
 
-  const { current: childrenOnActionListeners } = React.useRef<
-    OnActionListener[]
-  >([]);
+  const {
+    listeners: childrenOnActionListeners,
+    addListener,
+    removeListener,
+  } = useChildActionListeners();
 
   const onAction = useOnAction({
     router,
@@ -112,6 +110,14 @@ export default function useNavigationBuilder(
     childrenOnActionListeners,
   });
 
+  const onChildUpdate = useOnChildUpdate({
+    router,
+    onAction,
+    key,
+    getState,
+    setState,
+  });
+
   const helpers = useNavigationHelpers({
     onAction,
     getState,
@@ -127,19 +133,6 @@ export default function useNavigationBuilder(
     [helpers, currentState]
   );
 
-  const {
-    onChildUpdate,
-    registerListener,
-    unregisterListener,
-  } = useChildrenActionHelper({
-    router,
-    onAction,
-    key,
-    getState,
-    setState,
-    childrenOnActionListeners,
-  });
-
   const descriptors = useDescriptors({
     state: currentState,
     screens,
@@ -148,8 +141,8 @@ export default function useNavigationBuilder(
     getState,
     setState,
     onChildUpdate,
-    registerListener,
-    unregisterListener,
+    addListener,
+    removeListener,
   });
 
   return {

src/useOnAction.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import NavigationBuilderContext from './NavigationBuilderContext';
-import {
-  NavigationAction,
-  NavigationState,
-  Router,
-  OnActionListener,
-} from './types';
+import NavigationBuilderContext, {
+  ChildActionListener,
+} from './NavigationBuilderContext';
+import { NavigationAction, NavigationState, Router } from './types';
 
 type Options = {
   router: Router;
@@ -16,7 +13,7 @@ type Options = {
     state: NavigationState,
     action: NavigationAction
   ) => NavigationState | null;
-  childrenOnActionListeners: OnActionListener[];
+  childrenOnActionListeners: ChildActionListener[];
 };
 
 export default function useOnAction({

src/useChildrenActionHelper.tsx → src/useOnChildUpdate.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  NavigationAction,
-  NavigationState,
-  OnActionListener,
-  Router,
-} from './types';
+import { NavigationAction, NavigationState, Router } from './types';
 import NavigationBuilderContext from './NavigationBuilderContext';
 
 type Options = {
@@ -13,45 +8,28 @@ type Options = {
   getState: () => NavigationState;
   setState: (state: NavigationState) => void;
   key?: string;
-  childrenOnActionListeners: OnActionListener[];
 };
 
-export default function useChildrenActionHelper({
+export default function useOnChildUpdate({
   router,
   onAction,
   getState,
   key: routeKey,
   setState,
-  childrenOnActionListeners,
 }: Options) {
   const {
     onChildUpdate: parentOnChildUpdate,
-    registerListener: parentRegisterListener,
-    unregisterListener: parentUnregisterListener,
+    addListener: parentAddListener,
+    removeListener: parentRemoveListener,
   } = React.useContext(NavigationBuilderContext);
 
-  const registerListener = React.useCallback(
-    (listener: OnActionListener) => {
-      childrenOnActionListeners.push(listener);
-    },
-    [childrenOnActionListeners]
-  );
-
-  const unregisterListener = React.useCallback(
-    (listener: OnActionListener) => {
-      const index = childrenOnActionListeners.indexOf(listener);
-      childrenOnActionListeners.splice(index, 1);
-    },
-    [childrenOnActionListeners]
-  );
-
   React.useEffect(() => {
-    parentRegisterListener && parentRegisterListener(onAction);
+    parentAddListener && parentAddListener(onAction);
 
     return () => {
-      parentUnregisterListener && parentUnregisterListener(onAction);
+      parentRemoveListener && parentRemoveListener(onAction);
     };
-  }, [onAction, parentRegisterListener, parentUnregisterListener]);
+  }, [onAction, parentAddListener, parentRemoveListener]);
 
   const onChildUpdate = React.useCallback(
     (update: NavigationState, focus: boolean, key: string | undefined) => {
@@ -70,5 +48,6 @@ export default function useChildrenActionHelper({
     },
     [getState, parentOnChildUpdate, routeKey, router, setState]
   );
-  return { onChildUpdate, registerListener, unregisterListener };
+
+  return onChildUpdate;
 }