StackContainer refactor analagous to TabsContainer

also small change in TabsContainer

Author: sgaczol

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

@@ -62,7 +62,7 @@ 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 +73,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

@@ -270,8 +270,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

@@ -85,11 +85,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] None config matches the "${route.name}" route name`,
           );
         }