useComponentByName custom hook added, shared among both containers

Author: sgaczol

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

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import type { StackRouteConfig } from '../stack';
+import type { TabRouteConfig } from '../tabs';
+
+export const useComponentByName = (
+  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 { useComponentByName } from '../shared/use-component-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 = useComponentByName(routeConfigs);
 
   const [stackNavState, navActionDispatch]: [
     StackNavigationState,

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

@@ -21,6 +21,7 @@ import {
 } from './reducer';
 import { RNSLog } from 'react-native-screens/private';
 import { TabsContainerItem } from './TabsContainerItem';
+import { useComponentByName } from '../shared/use-component-by-name';
 
 export function TabsContainer(props: TabsContainerProps) {
   RNSLog.info('TabsContainer render');
@@ -34,13 +35,7 @@ export function TabsContainer(props: TabsContainerProps) {
 
   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 = useComponentByName(routeConfigs);
 
   const [tabsNavState, dispatch]: [
     TabsContainerState,