refactor(Example): TabsContainer and StackContainer refactor (#3925)

## Description

Previously, we were storing the actual React Component references
directly inside the `useReducer` state (within `TabRoute` and
`StackRoute` objects). This PR separates the navigation state from the
Components. During the render phase, the containers dynamically resolve
the correct Component by matching the route name from the state against
a `componentsByName` Map (built via `useMemo` from the `routeConfigs`
prop), rather than storing Component references in reducer state.

There is one issue related to `StackContainer`: often in our
environment, we wrap `StackContainer` in an intermediate component (e.g.
`StackSetup`) to consume contexts such as `useToast()`. If that wrapper
is not explicitly exported from its file, Fast Refresh causes
`useReducer` inside `StackContainer` to re-fire its initialization
function, resetting the stack to the first screen. This issue will be
solved in a separate PR.

## Changes

- Update `TabRoute` and `StackRoute` types to omit `Component` from the
route state
- Update `TabsContainer` and `StackContainer` to resolve components via
a `componentsByName` Map during render

## Before & after - visual documentation

N/A

## Test plan

N/A

## Checklist

- [ ] Included code example that can be used to test this change.
- [ ] For visual changes, included screenshots / GIFs / recordings
documenting the change.
- [ ] For API changes, updated relevant public types.
- [ ] Ensured that CI passes

---------

Co-authored-by: Copilot Autofix powered by AI <[email protected]>

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,10 +21,13 @@ 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 = useComponentsByName(routeConfigs);
+
   const [stackNavState, navActionDispatch]: [
     StackNavigationState,
     React.Dispatch<NavigationAction>,
@@ -62,7 +65,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 +76,13 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
             setRouteOptions: navMethods.setRouteOptions,
           };
 
+          const Component = componentsByName.get(name);
+          if (!Component) {
+            throw new Error(
+              `[Stack] No config matches the "${name}" route name`,
+            );
+          }
+
           return (
             <Stack.Screen
               key={routeKey}

…ontainers/stack/StackContainer.types.tsx …containers/stack/StackContainer.types.tsapps/src/shared/gamma/containers/stack/StackContainer.types.tsx renamed to apps/src/shared/gamma/containers/stack/StackContainer.types.ts apps/src/shared/gamma/containers/stack/StackContainer.types.tsx renamed to apps/src/shared/gamma/containers/stack/StackContainer.types.ts

@@ -22,10 +22,10 @@ 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
+  isMarkedForDismissal: boolean; // whether this route is during or after dismissal process
 };
 
 /// StackContainer props

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

@@ -21,6 +21,7 @@ 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');
@@ -34,6 +35,8 @@ export function TabsContainer(props: TabsContainerProps) {
 
   useSanitizeRouteConfigs(routeConfigs);
 
+  const componentsByName = useComponentsByName(routeConfigs);
+
   const [tabsNavState, dispatch]: [
     TabsContainerState,
     React.Dispatch<TabsNavigationAction>,
@@ -84,7 +87,23 @@ export function TabsContainer(props: TabsContainerProps) {
         const pendingForUpdate =
           route.routeKey === tabsNavState.suggestedState.selectedRouteKey;
 
-        return <TabsContainerItem key={route.routeKey} route={route} navMethods={navMethods} isSelected={isSelected} pendingForUpdate={pendingForUpdate} />
+        const Component = componentsByName.get(route.name);
+        if (!Component) {
+          throw new Error(
+            `[Tabs] No route config matches the "${route.name}" route name`,
+          );
+        }
+
+        return (
+          <TabsContainerItem
+            key={route.routeKey}
+            route={route}
+            navMethods={navMethods}
+            isSelected={isSelected}
+            pendingForUpdate={pendingForUpdate}
+            Component={Component}
+          />
+        );
       })}
     </Tabs.Host>
   );

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

@@ -27,7 +27,7 @@ export type TabRouteConfig = {
 /**
  * Runtime instance of a tab route. Created from a TabRouteConfig blueprint.
  */
-export type TabRoute = TabRouteConfig & {
+export type TabRoute = Omit<TabRouteConfig, 'Component'> & {
   routeKey: string;
 };
 

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

@@ -37,7 +37,7 @@ function TabsContainerItemImpl(props: TabsContainerItemProps) {
       {...nativeOptions}
       screenKey={screenKey}>
       <TabsNavigationContext value={tabsNavigationContext}>
-        {getContent(props.route.Component, safeAreaConfiguration)}
+        {getContent(props.Component, safeAreaConfiguration)}
       </TabsNavigationContext>
     </Tabs.Screen>
   );

apps/src/shared/gamma/containers/tabs/TabsContainerItem.types.ts

@@ -1,9 +1,10 @@
 import type { TabRoute, TabsNavigationMethods } from './TabsContainer.types';
+import React from 'react';
 
 export type TabsContainerItemProps = {
   route: TabRoute;
   navMethods: TabsNavigationMethods;
   isSelected: boolean;
   pendingForUpdate: boolean;
-}
-
+  Component: React.ComponentType;
+};

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

@@ -135,8 +135,10 @@ function tabsActionSetOptionsHandler(
 }
 
 function createTabRouteFromConfig(config: TabRouteConfig): TabRoute {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { Component, ...rest } = config;
   return {
-    ...config,
+    ...rest,
     // Tab names are required to be unique (enforced by useSanitizeRouteConfigs),
     // so the name itself serves as a stable unique key.
     routeKey: config.name,
@@ -205,4 +207,3 @@ function navStateWithConfirmedState(
     suggestedState: state.suggestedState,
   };
 }
-