refactor(tabs): extract TabsContainerItem and memoize tab screens (#3827)

## Description

Refactor `TabsContainer` to avoid unnecessary re-renders of all tab
screens when only one tab's state changes. Currently, every tab screen
is rendered inline inside `TabsContainer`, meaning any state change
(e.g. tab selection) causes all screens to re-render. Extracting each
screen into a memoized `TabsContainerItem` component allows React to
skip re-rendering tabs whose props haven't changed.

## Changes

- Extracted tab screen rendering logic (including safe area wrapping and
context provision) into a new `TabsContainerItem` component wrapped with
`React.memo`.
- Consolidated `setRouteOptions` and `selectTab` callbacks into a
`useTabsNavigationMethods` hook that returns a stable memoized object,
so it can be passed to children without causing unnecessary re-renders.
- Added `TabsNavigationMethods` type to `TabsContainer.types.tsx`.
- Moved `getContent` and `getSafeAreaViewEdges` helper functions from
`TabsContainer.tsx` to `TabsContainerItem.tsx` (co-located with their
only consumer).

## Test plan

- Verified tabs behavior in the FabricExample app — tab selection, safe
area insets, and route options updates work as before.
- Checked render logs (`RNSLog.info`) to confirm that non-selected tabs
are no longer re-rendering on tab switch.

## Checklist

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

Author: kkafar

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { I18nManager, Platform, type NativeSyntheticEvent } from 'react-native';
+import { I18nManager, type NativeSyntheticEvent } from 'react-native';
 import {
   SCREEN_KEY_MORE_NAV_CTRL,
   type TabSelectedEvent,
   Tabs,
   type TabsHostNavState,
 } from 'react-native-screens';
-import { SafeAreaView, type SafeAreaViewProps } from 'react-native-screens/experimental'
 import type {
   SelectTabMethod,
   TabRoute,
@@ -15,16 +14,14 @@ import type {
   TabsContainerProps,
   TabsContainerState,
   TabsNavigationAction,
+  TabsNavigationMethods,
 } from './TabsContainer.types';
-import {
-  TabsNavigationContext,
-  type TabsNavigationContextPayload,
-} from './contexts/TabsNavigationContext';
 import {
   tabsNavigationReducerWithLogging,
   determineInitialTabsContainerState,
 } from './reducer';
 import { RNSLog } from 'react-native-screens/private';
+import { TabsContainerItem } from './TabsContainerItem';
 
 export function TabsContainer(props: TabsContainerProps) {
   RNSLog.info('TabsContainer render');
@@ -48,13 +45,6 @@ export function TabsContainer(props: TabsContainerProps) {
     determineInitialTabsContainerState,
   );
 
-  const setRouteOptions = React.useCallback(
-    (routeKey: string, options: Partial<TabRouteOptions>) => {
-      dispatch({ type: 'set-options', routeKey, options });
-    },
-    [],
-  );
-
   const hostNavState = useTabsHostNavState(tabsNavState);
 
   const onTabSelectedCallback = React.useCallback(
@@ -82,12 +72,7 @@ export function TabsContainer(props: TabsContainerProps) {
     [onTabSelected],
   );
 
-  const selectTabMethod: SelectTabMethod = React.useCallback(
-    (routeKey: string) => {
-      dispatch({ type: 'tab-select', routeKey });
-    },
-    [],
-  );
+  const navMethods = useTabsNavigationMethods(dispatch);
 
   return (
     <Tabs.Host
@@ -105,77 +90,12 @@ export function TabsContainer(props: TabsContainerProps) {
         const pendingForUpdate =
           route.routeKey === tabsNavState.suggestedState.selectedRouteKey;
 
-        RNSLog.info(
-          `TabsContainer map to component -> ${route.routeKey} ${isSelected ? '(selected)' : ''
-          }`,
-        );
-
-        const tabsNavigationContext: TabsNavigationContextPayload = {
-          routeKey: route.routeKey,
-          routeOptions: { ...route.options },
-          setRouteOptions,
-          selectTab: selectTabMethod,
-          isSelected: isSelected,
-          shouldRenderContents: isSelected || pendingForUpdate,
-        };
-
-        const { safeAreaConfiguration, ...nativeOptions } = route.options ?? {};
-
-        return (
-          <Tabs.Screen
-            key={route.routeKey}
-            {...nativeOptions}
-            screenKey={route.routeKey}>
-            <TabsNavigationContext value={tabsNavigationContext}>
-              {getContent(route.Component, safeAreaConfiguration)}
-            </TabsNavigationContext>
-          </Tabs.Screen>
-        );
+        return <TabsContainerItem key={route.routeKey} route={route} navMethods={navMethods} isSelected={isSelected} pendingForUpdate={pendingForUpdate} />
       })}
     </Tabs.Host>
   );
 }
 
-function getContent(
-  Component: TabRouteConfig['Component'],
-  safeAreaConfiguration: SafeAreaViewProps | undefined,
-) {
-  const safeAreaConfigurationWithDefault = getSafeAreaViewEdges(
-    safeAreaConfiguration?.edges,
-  );
-
-  const anySAVEdgeSet = Object.values(safeAreaConfigurationWithDefault).some(
-    edge => edge === true,
-  );
-
-  if (anySAVEdgeSet) {
-    return (
-      <SafeAreaView {...safeAreaConfiguration}>
-        <Component />
-      </SafeAreaView>
-    );
-  }
-
-  return <Component />;
-}
-
-function getSafeAreaViewEdges(
-  edges?: SafeAreaViewProps['edges'],
-): NonNullable<SafeAreaViewProps['edges']> {
-  let defaultEdges: SafeAreaViewProps['edges'];
-
-  switch (Platform.OS) {
-    case 'android':
-      defaultEdges = { bottom: true };
-      break;
-    default:
-      defaultEdges = {};
-      break;
-  }
-
-  return { ...defaultEdges, ...edges };
-}
-
 function useTabsHostNavState(
   tabsNavState: TabsContainerState,
 ): TabsHostNavState {
@@ -211,3 +131,25 @@ function useSanitizeRouteConfigs(routeConfigs: TabRouteConfig[]) {
     throw new Error(`[Tabs] Tab name "${SCREEN_KEY_MORE_NAV_CTRL}" is reserved and can not be used`);
   }
 }
+
+function useTabsNavigationMethods(dispatch: React.Dispatch<TabsNavigationAction>): TabsNavigationMethods {
+  const setRouteOptions = React.useCallback(
+    (routeKey: string, options: Partial<TabRouteOptions>) => {
+      dispatch({ type: 'set-options', routeKey, options });
+    },
+    [dispatch],
+  );
+
+  const selectTab: SelectTabMethod = React.useCallback(
+    (routeKey: string) => {
+      dispatch({ type: 'tab-select', routeKey });
+    },
+    [dispatch],
+  );
+
+
+  return React.useMemo(() => ({
+    setRouteOptions,
+    selectTab
+  }), [setRouteOptions, selectTab]);
+}

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

@@ -50,7 +50,7 @@ export type TabsContainerState = {
   suggestedState: TabsNavState;
 };
 
-/// Navigation actions
+/// Navigation actions (reducer)
 
 export type TabsNavigationActionSelectTab = {
   type: 'tab-select';
@@ -110,3 +110,10 @@ export type SetTabOptionsMethod = (
 ) => void;
 
 export type SelectTabMethod = (routeKey: string) => void;
+
+/// Navigation methods (user facing)
+
+export type TabsNavigationMethods = {
+  setRouteOptions: SetTabOptionsMethod;
+  selectTab: SelectTabMethod;
+}

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Tabs } from "react-native-screens";
+import type { TabRouteConfig } from './TabsContainer.types';
+import type { TabsContainerItemProps } from './TabsContainerItem.types';
+import { SafeAreaView, type SafeAreaViewProps } from 'react-native-screens/experimental';
+import { Platform } from 'react-native';
+import { TabsNavigationContext } from './contexts/TabsNavigationContext';
+import { RNSLog } from 'react-native-screens/private';
+
+export const TabsContainerItem = React.memo(TabsContainerItemImpl);
+
+function TabsContainerItemImpl(props: TabsContainerItemProps) {
+
+  RNSLog.info(
+    `TabsContainerItem render: ${props.route.routeKey} ${props.isSelected ? '(selected)' : ''
+    } ${props.pendingForUpdate ? '(pending)' : ''}`,
+  );
+
+  const tabsNavigationContext = React.useMemo(() => {
+    return {
+      routeKey: props.route.routeKey,
+      routeOptions: { ...props.route.options },
+      setRouteOptions: props.navMethods.setRouteOptions,
+      selectTab: props.navMethods.selectTab,
+      isSelected: props.isSelected,
+      shouldRenderContents: props.isSelected || props.pendingForUpdate,
+    }
+  }, [props.route.routeKey, props.route.options, props.navMethods, props.isSelected, props.pendingForUpdate]);
+
+  const { safeAreaConfiguration, ...nativeOptions } = props.route.options ?? {};
+
+  const screenKey = props.route.routeKey;
+
+  return (
+    <Tabs.Screen
+      key={screenKey}
+      {...nativeOptions}
+      screenKey={screenKey}>
+      <TabsNavigationContext value={tabsNavigationContext}>
+        {getContent(props.route.Component, safeAreaConfiguration)}
+      </TabsNavigationContext>
+    </Tabs.Screen>
+  );
+}
+
+function getContent(
+  Component: TabRouteConfig['Component'],
+  safeAreaConfiguration: SafeAreaViewProps | undefined,
+) {
+  const safeAreaConfigurationWithDefault = getSafeAreaViewEdges(
+    safeAreaConfiguration?.edges,
+  );
+
+  const anySAVEdgeSet = Object.values(safeAreaConfigurationWithDefault).some(
+    edge => edge === true,
+  );
+
+  if (anySAVEdgeSet) {
+    return (
+      <SafeAreaView {...safeAreaConfiguration}>
+        <Component />
+      </SafeAreaView>
+    );
+  }
+
+  return <Component />;
+}
+
+function getSafeAreaViewEdges(
+  edges?: SafeAreaViewProps['edges'],
+): NonNullable<SafeAreaViewProps['edges']> {
+  let defaultEdges: SafeAreaViewProps['edges'];
+
+  switch (Platform.OS) {
+    case 'android':
+      defaultEdges = { bottom: true };
+      break;
+    default:
+      defaultEdges = {};
+      break;
+  }
+
+  return { ...defaultEdges, ...edges };
+}
+

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

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

apps/src/shared/gamma/containers/tabs/index.ts

@@ -11,6 +11,10 @@ export type {
   TabsContainerState,
 } from './TabsContainer.types';
 
+export type {
+  TabsContainerItemProps
+} from './TabsContainerItem.types.ts'
+
 export type { TabsNavigationContextPayload } from './contexts/TabsNavigationContext';
 export type { TabsHostConfigContextPayload } from './contexts/TabsHostConfigContext';