StackContainer refactor analagous to TabsContainer

also small change in TabsContainer

Author: sgaczol

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

@@ -62,7 +62,12 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
   return (
     <Stack.Host ref={hostRef}>
       {stackNavState.stack.map(
-        ({ Component, options: { headerConfig, ...options }, activityMode, routeKey }) => {
+        ({
+          options: { headerConfig, ...options },
+          activityMode,
+          routeKey,
+          name,
+        }) => {
           const stackNavigationContext: StackNavigationContextPayload = {
             routeKey,
             routeOptions: { ...options },
@@ -73,6 +78,17 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
             setRouteOptions: navMethods.setRouteOptions,
           };
 
+          const matchingConfig = routeConfigs.find(
+            config => config.name === name,
+          );
+          if (!matchingConfig) {
+            throw new Error(
+              `[Stack] No config matches the "${name}" route name`,
+            );
+          }
+
+          const Component = matchingConfig.Component;
+
           return (
             <Stack.Screen
               key={routeKey}

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

@@ -22,7 +22,7 @@ export type StackRouteConfig = {
   options: StackRouteOptions;
 };
 
-export type StackRoute = StackRouteConfig & {
+export type StackRoute = Omit<StackRouteConfig, 'Component'> & {
   activityMode: StackScreenProps['activityMode'];
   routeKey: StackScreenProps['screenKey'];
   isMarkedForDismissal: Boolean; // whether this route is during or after dismissal process

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

@@ -80,7 +80,9 @@ function navigationActionPushHandler(
   const stack = state.stack;
   const renderedRouteIndex = stack.findIndex(
     route =>
-      route.name === action.routeName && route.activityMode === 'detached' && !route.isMarkedForDismissal,
+      route.name === action.routeName &&
+      route.activityMode === 'detached' &&
+      !route.isMarkedForDismissal,
   );
 
   if (renderedRouteIndex !== NOT_FOUND_INDEX) {
@@ -161,10 +163,14 @@ function navigationActionPopHandler(
   }
 
   // Pop operation on not-top screen is forbidden and might crash.
-  const topAttachedRouteIndex = state.stack.findLastIndex(r => r.activityMode === 'attached');
+  const topAttachedRouteIndex = state.stack.findLastIndex(
+    r => r.activityMode === 'attached',
+  );
 
   if (topAttachedRouteIndex > routeIndex) {
-    console.warn(`[Stack] Can not perform pop action on route: ${action.routeKey} - not a top screen`);
+    console.warn(
+      `[Stack] Can not perform pop action on route: ${action.routeKey} - not a top screen`,
+    );
     return state;
   }
 
@@ -270,8 +276,10 @@ function createRouteFromConfig(
   config: StackRouteConfig,
   activityMode: StackScreenActivityMode = 'detached',
 ): StackRoute {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { Component, ...rest } = config;
   return {
-    ...config,
+    ...rest,
     activityMode,
     routeKey: generateRouteKeyForRouteName(config.name),
     isMarkedForDismissal: false,

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

@@ -25,12 +25,7 @@ import { TabsContainerItem } from './TabsContainerItem';
 export function TabsContainer(props: TabsContainerProps) {
   RNSLog.info('TabsContainer render');
 
-  const {
-    routeConfigs,
-    defaultRouteName,
-    onTabSelected,
-    ...restProps
-  } = props;
+  const { routeConfigs, defaultRouteName, onTabSelected, ...restProps } = props;
 
   useSanitizeRouteConfigs(routeConfigs);
 
@@ -85,11 +80,11 @@ export function TabsContainer(props: TabsContainerProps) {
           route.routeKey === tabsNavState.suggestedState.selectedRouteKey;
 
         const matchingConfig = routeConfigs.find(
-          config => config.name === route.routeKey,
+          config => config.name === route.name,
         );
         if (!matchingConfig) {
           throw new Error(
-            `[Tabs] None config matches the "${route.routeKey}" routeKey`,
+            `[Tabs] No config matches the "${route.name}" route name`,
           );
         }
 
@@ -138,7 +133,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 });
@@ -154,9 +151,11 @@ function useTabsNavigationMethods(dispatch: React.Dispatch<TabsNavigationAction>
     [dispatch],
   );
 
-
-  return React.useMemo(() => ({
-    setRouteOptions,
-    selectTab
-  }), [setRouteOptions, selectTab]);
+  return React.useMemo(
+    () => ({
+      setRouteOptions,
+      selectTab,
+    }),
+    [setRouteOptions, selectTab],
+  );
 }