refactor: Change COmponent to element, add tests

Loloekk · Loloekk · commit 2492c9a743e7 · 2026-07-30T15:45:41.000+02:00
diff --git a/apps/src/shared/containers/shared/use-elements-by-name.ts b/apps/src/shared/containers/shared/use-elements-by-name.ts
@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import type { StackRouteConfig } from '../stack';
 import type { TabRouteConfig } from '../tabs';
 
-export const useComponentsByName = (
+export const useElementsByName = (
   routeConfigs: StackRouteConfig[] | TabRouteConfig[],
 ) => {
   return useMemo(() => {
-    const map = new Map<string, React.ComponentType>();
+    const map = new Map<string, React.ReactElement>();
 
     for (const config of routeConfigs) {
-      map.set(config.name, config.Component);
+      map.set(config.name, config.element);
     }
 
     return map;
diff --git a/apps/src/shared/containers/stack/StackContainer.tsx b/apps/src/shared/containers/stack/StackContainer.tsx
@@ -21,12 +21,12 @@ import {
   useRenderDebugInfo,
 } from 'react-native-screens/private';
 import { useParentNavigationEffect } from './hooks/useParentNavigationEffect';
-import { useComponentsByName } from '../shared/use-components-by-name';
+import { useElementsByName } from '../shared/use-elements-by-name';
 
 export function StackContainer({ routeConfigs }: StackContainerProps) {
   useSanitizeRouteConfigs(routeConfigs);
 
-  const componentsByName = useComponentsByName(routeConfigs);
+  const elementsByName = useElementsByName(routeConfigs);
 
   const [stackNavState, navActionDispatch]: [
     StackNavigationState,
@@ -81,8 +81,8 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
             setRouteOptions: navMethods.setRouteOptions,
           };
 
-          const Component = componentsByName.get(name);
-          if (!Component) {
+          const element = elementsByName.get(name);
+          if (!element) {
             throw new Error(
               `[Stack] No config matches the "${name}" route name`,
             );
@@ -97,7 +97,9 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
               onDismiss={onScreenDismissed}
               onNativeDismiss={onScreenNativelyDismissed}>
               <StackNavigationContext.Provider value={stackNavigationContext}>
-                <Component />
+                {/* Clone so multiple stack entries of the same route get distinct instances.
+                {React.cloneElement(element)} */}
+                {element}
                 {headerConfig !== undefined && (
                   <Stack.HeaderConfig ref={headerConfigRef} {...headerConfig} />
                 )}
diff --git a/apps/src/shared/containers/stack/StackContainer.types.ts b/apps/src/shared/containers/stack/StackContainer.types.ts
@@ -20,11 +20,11 @@ export type StackRouteOptions = Omit<
  */
 export type StackRouteConfig = {
   name: string;
-  Component: React.ComponentType;
+  element: React.ReactElement;
   options: StackRouteOptions;
 };
 
-export type StackRoute = Omit<StackRouteConfig, 'Component'> & {
+export type StackRoute = Omit<StackRouteConfig, 'element'> & {
   activityMode: StackScreenProps['activityMode'];
   routeKey: StackScreenProps['screenKey'];
   isMarkedForDismissal: boolean; // whether this route is during or after dismissal process
diff --git a/apps/src/shared/containers/stack/reducer.tsx b/apps/src/shared/containers/stack/reducer.tsx
@@ -277,7 +277,7 @@ function createRouteFromConfig(
   activityMode: StackScreenActivityMode = 'detached',
 ): StackRoute {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { Component, ...rest } = config;
+  const { element, ...rest } = config;
   return {
     ...rest,
     activityMode,
diff --git a/apps/src/shared/containers/tabs/TabsContainer.tsx b/apps/src/shared/containers/tabs/TabsContainer.tsx
@@ -21,7 +21,7 @@ import {
 } from './reducer';
 import { RNSLog } from 'react-native-screens/private';
 import { TabsContainerItem } from './TabsContainerItem';
-import { useComponentsByName } from '../shared/use-components-by-name';
+import { useElementsByName } from '../shared/use-elements-by-name';
 
 export function TabsContainer(props: TabsContainerProps) {
   RNSLog.info('TabsContainer render');
@@ -30,7 +30,7 @@ export function TabsContainer(props: TabsContainerProps) {
 
   useSanitizeRouteConfigs(routeConfigs);
 
-  const componentsByName = useComponentsByName(routeConfigs);
+  const elementsByName = useElementsByName(routeConfigs);
 
   const [tabsNavState, dispatch]: [
     TabsContainerState,
@@ -82,8 +82,8 @@ export function TabsContainer(props: TabsContainerProps) {
         const pendingForUpdate =
           route.routeKey === tabsNavState.suggestedState.selectedRouteKey;
 
-        const Component = componentsByName.get(route.name);
-        if (!Component) {
+        const element = elementsByName.get(route.name);
+        if (!element) {
           throw new Error(
             `[Tabs] No route config matches the "${route.name}" route name`,
           );
@@ -96,7 +96,7 @@ export function TabsContainer(props: TabsContainerProps) {
             navMethods={navMethods}
             isSelected={isSelected}
             pendingForUpdate={pendingForUpdate}
-            Component={Component}
+            element={element}
           />
         );
       })}
diff --git a/apps/src/shared/containers/tabs/TabsContainer.types.tsx b/apps/src/shared/containers/tabs/TabsContainer.types.tsx
@@ -20,14 +20,14 @@ export type TabRouteOptions = Omit<
  */
 export type TabRouteConfig = {
   name: string;
-  Component: React.ComponentType;
+  element: React.ReactElement;
   options?: TabRouteOptions;
 };
 
 /**
  * Runtime instance of a tab route. Created from a TabRouteConfig blueprint.
  */
-export type TabRoute = Omit<TabRouteConfig, 'Component'> & {
+export type TabRoute = Omit<TabRouteConfig, 'element'> & {
   routeKey: string;
 };
 
diff --git a/apps/src/shared/containers/tabs/TabsContainerItem.tsx b/apps/src/shared/containers/tabs/TabsContainerItem.tsx
@@ -43,14 +43,14 @@ function TabsContainerItemImpl(props: TabsContainerItemProps) {
   return (
     <Tabs.Screen key={screenKey} {...nativeOptions} screenKey={screenKey}>
       <TabsNavigationContext value={tabsNavigationContext}>
-        {getContent(props.Component, safeAreaConfiguration)}
+        {getContent(props.element, safeAreaConfiguration)}
       </TabsNavigationContext>
     </Tabs.Screen>
   );
 }
 
 function getContent(
-  Component: TabRouteConfig['Component'],
+  element: TabRouteConfig['element'],
   safeAreaConfiguration: SafeAreaViewProps | undefined,
 ) {
   const safeAreaConfigurationWithDefault = getSafeAreaViewEdges(
@@ -62,14 +62,10 @@ function getContent(
   );
 
   if (anySAVEdgeSet) {
-    return (
-      <SafeAreaView {...safeAreaConfiguration}>
-        <Component />
-      </SafeAreaView>
-    );
+    return <SafeAreaView {...safeAreaConfiguration}>{element}</SafeAreaView>;
   }
 
-  return <Component />;
+  return element;
 }
 
 function getSafeAreaViewEdges(
diff --git a/apps/src/shared/containers/tabs/TabsContainerItem.types.ts b/apps/src/shared/containers/tabs/TabsContainerItem.types.ts
@@ -6,5 +6,5 @@ export type TabsContainerItemProps = {
   navMethods: TabsNavigationMethods;
   isSelected: boolean;
   pendingForUpdate: boolean;
-  Component: React.ComponentType;
+  element: React.ReactElement;
 };
diff --git a/apps/src/shared/containers/tabs/reducer.tsx b/apps/src/shared/containers/tabs/reducer.tsx
@@ -139,7 +139,7 @@ function tabsActionSetOptionsHandler(
 
 function createTabRouteFromConfig(config: TabRouteConfig): TabRoute {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { Component, ...rest } = config;
+  const { element, ...rest } = config;
   return {
     ...rest,
     // Tab names are required to be unique (enforced by useSanitizeRouteConfigs),
diff --git a/apps/src/tests/PoC/TestStackPoC.tsx b/apps/src/tests/PoC/TestStackPoC.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import {
+  StackContainer,
+  useStackNavigationContext,
+} from '@apps/shared/containers/stack';
+import { CenteredLayoutView } from '@apps/shared/CenteredLayoutView';
+
+const ROUTE_NAMES = [
+  'SharedOne',
+  'SharedTwo',
+  'InlineOne',
+  'InlineTwo',
+] as const;
+
+function StatefulScreen({
+  title,
+  backgroundColor,
+}: {
+  title: string;
+  backgroundColor: string;
+}) {
+  const [count, setCount] = useState(0);
+  const navigation = useStackNavigationContext();
+
+  return (
+    <CenteredLayoutView style={{ backgroundColor }}>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.meta}>routeKey: {navigation.routeKey}</Text>
+      <Text style={styles.counter}>Local count: {count}</Text>
+
+      <Button title="+ Local state" onPress={() => setCount(c => c + 1)} />
+
+      <View style={styles.row}>
+        {ROUTE_NAMES.map(name => (
+          <Button
+            key={name}
+            title={`Push ${name}`}
+            onPress={() => navigation.push(name)}
+          />
+        ))}
+      </View>
+
+      <Button title="Pop" onPress={() => navigation.pop(navigation.routeKey)} />
+    </CenteredLayoutView>
+  );
+}
+
+// Same element object reused by SharedOne + SharedTwo — exercises StackContainer
+// rendering without cloneElement (state/identity sharing across stack entries).
+const SharedRef = (
+  <StatefulScreen title="Shared Ref (same object)" backgroundColor="#E6E6FA" />
+);
+
+export default function TestStackPoC() {
+  return (
+    <StackContainer
+      routeConfigs={[
+        {
+          name: 'SharedOne',
+          element: SharedRef,
+          options: {},
+        },
+        {
+          name: 'SharedTwo',
+          element: SharedRef,
+          options: {},
+        },
+        {
+          name: 'InlineOne',
+          element: (
+            <StatefulScreen title="Inline One" backgroundColor="#FFE4C4" />
+          ),
+          options: {},
+        },
+        {
+          name: 'InlineTwo',
+          element: (
+            <StatefulScreen title="Inline Two" backgroundColor="#FFE4C4" />
+          ),
+          options: {},
+        },
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  title: { fontSize: 20, fontWeight: 'bold' },
+  meta: { fontSize: 14, marginVertical: 4 },
+  counter: { fontSize: 24, fontWeight: '600', marginVertical: 8 },
+  row: { gap: 4, alignItems: 'stretch', width: '100%', paddingHorizontal: 16 },
+});
diff --git a/apps/src/tests/PoC/TestTabsPoC.tsx b/apps/src/tests/PoC/TestTabsPoC.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import {
+  TabsContainer,
+  useTabsNavigationContext,
+  DEFAULT_TAB_ROUTE_OPTIONS,
+} from '@apps/shared/containers/tabs';
+import { CenteredLayoutView } from '@apps/shared/CenteredLayoutView';
+
+const ROUTE_NAMES = [
+  'SharedOne',
+  'SharedTwo',
+  'InlineOne',
+  'InlineTwo',
+] as const;
+
+function StatefulScreen({
+  title,
+  backgroundColor,
+}: {
+  title: string;
+  backgroundColor: string;
+}) {
+  const [count, setCount] = useState(0);
+  const navigation = useTabsNavigationContext();
+
+  return (
+    <CenteredLayoutView style={{ backgroundColor }}>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.meta}>routeKey: {navigation.routeKey}</Text>
+      <Text style={styles.meta}>
+        isSelected: {String(navigation.isSelected)}
+      </Text>
+      <Text style={styles.counter}>Local count: {count}</Text>
+
+      <Button title="+ Local state" onPress={() => setCount(c => c + 1)} />
+
+      <View style={styles.row}>
+        {ROUTE_NAMES.map(name => (
+          <Button
+            key={name}
+            title={`Select ${name}`}
+            onPress={() => navigation.selectTab(name)}
+          />
+        ))}
+      </View>
+    </CenteredLayoutView>
+  );
+}
+
+// Same element object reused by SharedOne + SharedTwo — exercises TabsContainer
+// rendering without cloneElement (state/identity sharing across tab items).
+const SharedRef = (
+  <StatefulScreen title="Shared Ref (same object)" backgroundColor="#E6E6FA" />
+);
+
+export default function TestTabsPoC() {
+  return (
+    <TabsContainer
+      defaultRouteName="SharedOne"
+      routeConfigs={[
+        {
+          name: 'SharedOne',
+          element: SharedRef,
+          options: {
+            ...DEFAULT_TAB_ROUTE_OPTIONS,
+            title: 'SharedOne',
+          },
+        },
+        {
+          name: 'SharedTwo',
+          element: SharedRef,
+          options: {
+            ...DEFAULT_TAB_ROUTE_OPTIONS,
+            title: 'SharedTwo',
+          },
+        },
+        {
+          name: 'InlineOne',
+          element: (
+            <StatefulScreen title="Inline One" backgroundColor="#FFE4C4" />
+          ),
+          options: {
+            ...DEFAULT_TAB_ROUTE_OPTIONS,
+            title: 'Inline One',
+          },
+        },
+        {
+          name: 'InlineTwo',
+          element: (
+            <StatefulScreen title="Inline Two" backgroundColor="#FFE4C4" />
+          ),
+          options: {
+            ...DEFAULT_TAB_ROUTE_OPTIONS,
+            title: 'Inline Two',
+          },
+        },
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  title: { fontSize: 20, fontWeight: 'bold' },
+  meta: { fontSize: 14, marginVertical: 4 },
+  counter: { fontSize: 24, fontWeight: '600', marginVertical: 8 },
+  row: { gap: 4, alignItems: 'stretch', width: '100%', paddingHorizontal: 16 },
+});
diff --git a/apps/src/tests/PoC/index.ts b/apps/src/tests/PoC/index.ts
@@ -0,0 +1,3 @@
+export { default as TestStackSimpleNavPoC } from './test-stack-simple-navPoC';
+export { default as TestStackPoC } from './TestStackPoC';
+export { default as TestTabsPoC } from './TestTabsPoC';
diff --git a/apps/src/tests/PoC/test-stack-simple-navPoC/index.tsx b/apps/src/tests/PoC/test-stack-simple-navPoC/index.tsx
diff --git a/apps/src/tests/PoC/test-stack-simple-navPoC/scenario-description.ts b/apps/src/tests/PoC/test-stack-simple-navPoC/scenario-description.ts
diff --git a/apps/src/tests/PoC/test-stack-simple-navPoC/scenario.md b/apps/src/tests/PoC/test-stack-simple-navPoC/scenario.md
diff --git a/apps/src/tests/issue-tests/index.ts b/apps/src/tests/issue-tests/index.ts
diff --git a/apps/tsconfig.json b/apps/tsconfig.json
