add useComponentsByName custom hook, shared among both containers

Author: sgaczol

apps/src/shared/gamma/containers/shared/use-components-by-name.ts

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import type { StackRouteConfig } from '../stack';
+import type { TabRouteConfig } from '../tabs';
+
+export const useComponentsByName = (
+  routeConfigs: StackRouteConfig[] | TabRouteConfig[],
+) => {
+  return useMemo(() => {
+    const map = new Map<string, React.ComponentType>();
+
+    for (const config of routeConfigs) {
+      map.set(config.name, config.Component);
+    }
+
+    return map;
+  }, [routeConfigs]);
+};

apps/src/shared/gamma/containers/stack/StackContainer.tsx

@@ -21,17 +21,12 @@ import {
   useRenderDebugInfo,
 } from 'react-native-screens/private';
 import { useParentNavigationEffect } from './hooks/useParentNavigationEffect';
+import { useComponentsByName } from '../shared/use-components-by-name';
 
 export function StackContainer({ routeConfigs }: StackContainerProps) {
   useSanitizeRouteConfigs(routeConfigs);
 
-  const componentsByName = React.useMemo(() => {
-    const map = new Map<string, StackRouteConfig['Component']>();
-    for (const config of routeConfigs) {
-      map.set(config.name, config.Component);
-    }
-    return map;
-  }, [routeConfigs]);
+  const componentsByName = useComponentsByName(routeConfigs);
 
   const [stackNavState, navActionDispatch]: [
     StackNavigationState,
@@ -70,7 +65,12 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
   return (
     <Stack.Host ref={hostRef}>
       {stackNavState.stack.map(
-        ({ options: { headerConfig, ...options }, activityMode, routeKey, name }) => {
+        ({
+          options: { headerConfig, ...options },
+          activityMode,
+          routeKey,
+          name,
+        }) => {
           const stackNavigationContext: StackNavigationContextPayload = {
             routeKey,
             routeOptions: { ...options },

apps/src/shared/gamma/containers/tabs/TabsContainer.tsx

@@ -21,26 +21,16 @@ import {
 } from './reducer';
 import { RNSLog } from 'react-native-screens/private';
 import { TabsContainerItem } from './TabsContainerItem';
+import { useComponentsByName } from '../shared/use-components-by-name';
 
 export function TabsContainer(props: TabsContainerProps) {
   RNSLog.info('TabsContainer render');
 
-  const {
-    routeConfigs,
-    defaultRouteName,
-    onTabSelected,
-    ...restProps
-  } = props;
+  const { routeConfigs, defaultRouteName, onTabSelected, ...restProps } = props;
 
   useSanitizeRouteConfigs(routeConfigs);
 
-  const componentsByName = React.useMemo(() => {
-    const map = new Map<string, TabRouteConfig['Component']>();
-    for (const config of routeConfigs) {
-      map.set(config.name, config.Component);
-    }
-    return map;
-  }, [routeConfigs]);
+  const componentsByName = useComponentsByName(routeConfigs);
 
   const [tabsNavState, dispatch]: [
     TabsContainerState,
@@ -142,7 +132,9 @@ function useSanitizeRouteConfigs(routeConfigs: TabRouteConfig[]) {
   }
 }
 
-function useTabsNavigationMethods(dispatch: React.Dispatch<TabsNavigationAction>): TabsNavigationMethods {
+function useTabsNavigationMethods(
+  dispatch: React.Dispatch<TabsNavigationAction>,
+): TabsNavigationMethods {
   const setRouteOptions = React.useCallback(
     (routeKey: string, options: Partial<TabRouteOptions>) => {
       dispatch({ type: 'set-options', routeKey, options });
@@ -153,14 +145,20 @@ function useTabsNavigationMethods(dispatch: React.Dispatch<TabsNavigationAction>
   const selectTab: SelectTabMethod = React.useCallback(
     (routeKey: string, forceAction?: boolean) => {
       const shouldForceAction = forceAction ?? false;
-      dispatch({ type: 'tab-select', routeKey, forceAction: shouldForceAction });
+      dispatch({
+        type: 'tab-select',
+        routeKey,
+        forceAction: shouldForceAction,
+      });
     },
     [dispatch],
   );
 
-
-  return React.useMemo(() => ({
-    setRouteOptions,
-    selectTab
-  }), [setRouteOptions, selectTab]);
+  return React.useMemo(
+    () => ({
+      setRouteOptions,
+      selectTab,
+    }),
+    [setRouteOptions, selectTab],
+  );
 }