refactor(example): rename leftover symbols mentioning "bottom tabs" (#3756)

## Description

This PR renames leftover `BottomTabs` references to `Tabs`.

## Changes

* Rename the `BottomTabsContainer` example implementation to
`TabsContainer`.
* **Leave tests cases such as `TestBottomTabs` unmodified**.


[Explanation](c6eb0f6)
* Rename appropriate directories in example apps.]
* Rename many components.


Closes
<software-mansion/react-native-screens-labs#783>

---------

Co-authored-by: Claude Sonnet 4.6 <[email protected]>

Author: kkafar

FabricExample/e2e/example-tests/nativeBottomTabs.e2e.ts

@@ -1,7 +1,7 @@
 import { device, expect, element, by } from 'detox';
 import { selectIssueTestScreen } from '../e2e-utils';
 
-describe('Native BottomTabs', () => {
+describe('Native tabs', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
   });

…ers/bottom-tabs/ConfigWrapperContext.tsx …containers/tabs/ConfigWrapperContext.tsxapps/src/shared/gamma/containers/bottom-tabs/ConfigWrapperContext.tsx renamed to apps/src/shared/gamma/containers/tabs/ConfigWrapperContext.tsx apps/src/shared/gamma/containers/bottom-tabs/ConfigWrapperContext.tsx renamed to apps/src/shared/gamma/containers/tabs/ConfigWrapperContext.tsx

@@ -12,37 +12,37 @@ import ConfigWrapperContext from './ConfigWrapperContext';
 import { RNSLog } from 'react-native-screens/private';
 
 export interface TabConfiguration {
-  tabScreenProps: TabsScreenProps;
+  options: TabsScreenProps;
   component: React.ComponentType;
   safeAreaConfiguration?: SafeAreaViewProps;
 }
 
-export type BottomTabsContainerProps = TabsHostProps & {
+export type TabsContainerProps = TabsHostProps & {
   tabConfigs: TabConfiguration[];
 };
 
-export function BottomTabsContainer(props: BottomTabsContainerProps) {
-  RNSLog.info('BottomTabsContainer render');
+export function TabsContainer(props: TabsContainerProps) {
+  RNSLog.info('TabsContainer render');
 
   const { tabConfigs, ...restProps } = props;
 
   const [focusedScreenKey, setFocusedScreenKey] = React.useState<string>(() => {
-    RNSLog.log('BottomTabsContainer focusedStateKey initial state computed');
+    RNSLog.log('TabsContainer focusedStateKey initial state computed');
 
     if (props.tabConfigs.length === 0) {
       throw new Error('There must be at least one tab defined');
     }
 
     const maybeUserRequestedFocusedTab = tabConfigs.find(
-      tabConfig => tabConfig.tabScreenProps.isFocused === true,
-    )?.tabScreenProps.screenKey;
+      tabConfig => tabConfig.options.isFocused === true,
+    )?.options.screenKey;
 
     if (maybeUserRequestedFocusedTab != null) {
       return maybeUserRequestedFocusedTab;
     }
 
     // Default to first tab
-    return tabConfigs[0].tabScreenProps.screenKey;
+    return tabConfigs[0].options.screenKey;
   });
 
   const configWrapper = React.useContext(ConfigWrapperContext);
@@ -77,27 +77,26 @@ export function BottomTabsContainer(props: BottomTabsContainerProps) {
 
   return (
     <Tabs.Host
-      // Use controlled bottom tabs by default, but allow to overwrite if user wants to
+      // Use controlled tabs by default, but allow to overwrite if user wants to
       onNativeFocusChange={onNativeFocusChangeCallback}
       experimentalControlNavigationStateInJS={
         configWrapper.config.controlledBottomTabs
       }
       direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
       {...restProps}>
       {tabConfigs.map(tabConfig => {
-        const screenKey = tabConfig.tabScreenProps.screenKey;
-        const isFocused =
-          tabConfig.tabScreenProps.screenKey === focusedScreenKey;
+        const screenKey = tabConfig.options.screenKey;
+        const isFocused = tabConfig.options.screenKey === focusedScreenKey;
         RNSLog.info(
-          `BottomTabsContainer map to component -> ${screenKey} ${
+          `TabsContainer map to component -> ${screenKey} ${
             isFocused ? '(focused)' : ''
           }`,
         );
 
         return (
           <Tabs.Screen
             key={screenKey}
-            {...tabConfig.tabScreenProps}
+            {...tabConfig.options}
             isFocused={isFocused} // notice that the value passed by user is overriden here!
           >
             {getContent(tabConfig)}

…ners/bottom-tabs/BottomTabsContainer.tsx …/gamma/containers/tabs/TabsContainer.tsxapps/src/shared/gamma/containers/bottom-tabs/BottomTabsContainer.tsx renamed to apps/src/shared/gamma/containers/tabs/TabsContainer.tsx apps/src/shared/gamma/containers/bottom-tabs/BottomTabsContainer.tsx renamed to apps/src/shared/gamma/containers/tabs/TabsContainer.tsx

@@ -45,15 +45,15 @@ function ConfigScreen() {
         label="Tab Screen orientation"
         items={['portrait', 'landscape', 'undefined']}
         value={
-          findTabScreenOptions(tabsConfig, 'Tab1')?.tabScreenProps
-            .orientation ?? 'undefined'
+          findTabScreenOptions(tabsConfig, 'Tab1')?.options.orientation ??
+          'undefined'
         }
         onValueChange={value =>
           tabsDispatch({
             type: 'tabScreen',
             screenKey: 'Tab1',
             config: {
-              tabScreenProps: {
+              options: {
                 orientation: value === 'undefined' ? undefined : value,
               },
             },

apps/src/tests/component-integration-tests/orientation/orientation-stack-in-tabs.tsx

@@ -59,15 +59,15 @@ function ConfigScreen() {
         label="Tab Screen orientation"
         items={['portrait', 'landscape', 'undefined']}
         value={
-          findTabScreenOptions(tabsConfig, 'Tab1')?.tabScreenProps
-            .orientation ?? 'undefined'
+          findTabScreenOptions(tabsConfig, 'Tab1')?.options.orientation ??
+          'undefined'
         }
         onValueChange={value =>
           tabsDispatch({
             type: 'tabScreen',
             screenKey: 'Tab1',
             config: {
-              tabScreenProps: {
+              options: {
                 orientation: value === 'undefined' ? undefined : value,
               },
             },

apps/src/tests/component-integration-tests/orientation/orientation-tabs-in-stack.tsx

@@ -19,13 +19,13 @@ import { SearchBarPlacement, SearchBarProps } from 'react-native-screens';
 import { ListItem, SettingsPicker, SettingsSwitch } from '../../shared';
 import { CenteredLayoutView } from '../../shared/CenteredLayoutView';
 import {
-  BottomTabsContainer,
+  TabsContainer,
   TabConfiguration,
-} from '../../shared/gamma/containers/bottom-tabs/BottomTabsContainer';
+} from '../../shared/gamma/containers/tabs/TabsContainer';
 import ConfigWrapperContext, {
   Configuration,
   DEFAULT_GLOBAL_CONFIGURATION,
-} from '../../shared/gamma/containers/bottom-tabs/ConfigWrapperContext';
+} from '../../shared/gamma/containers/tabs/ConfigWrapperContext';
 
 type NavigationProp<ParamList extends ParamListBase> = {
   navigation: NativeStackNavigationProp<ParamList>;
@@ -89,7 +89,7 @@ function Home({ navigation }: MainStackNavigationProp) {
       <Text>Test Search Bar placement</Text>
       <Button title="Stack only" onPress={() => navigation.push('Stack')} />
       <Button
-        title="Bottom Tabs and Stack"
+        title="Tabs and Stack"
         onPress={() => navigation.push('StackAndTabs')}
       />
     </View>
@@ -201,7 +201,7 @@ function TabsStackComponent() {
 
   const TAB_CONFIGS: TabConfiguration[] = [
     {
-      tabScreenProps: {
+      options: {
         screenKey: 'main',
         title: 'Main',
         ios: {
@@ -214,7 +214,7 @@ function TabsStackComponent() {
       component: () => Menu({ tabsMode: true }),
     },
     {
-      tabScreenProps: {
+      options: {
         screenKey: 'another',
         title: 'Another',
         ios: {
@@ -227,7 +227,7 @@ function TabsStackComponent() {
       component: AnotherTab,
     },
     {
-      tabScreenProps: {
+      options: {
         screenKey: 'examples',
         title: 'Search',
         ios: {
@@ -248,7 +248,7 @@ function TabsStackComponent() {
         config,
         setConfig,
       }}>
-      <BottomTabsContainer tabConfigs={TAB_CONFIGS} />
+      <TabsContainer tabConfigs={TAB_CONFIGS} />
     </ConfigWrapperContext.Provider>
   );
 }

apps/src/tests/issue-tests/Test3168.tsx

@@ -5,21 +5,21 @@ import {
   ScrollEdgeEffectsConfigContext,
 } from './context';
 import { NavigationContainer } from '@react-navigation/native';
-import { BottomTabsContainer } from '../../../shared/gamma/containers/bottom-tabs/BottomTabsContainer';
+import { TabsContainer } from '../../../shared/gamma/containers/tabs/TabsContainer';
 import { Config } from './Config';
 import { StackScenario } from './StackScenario';
 import { ScrollView } from 'react-native';
 
-export function StackInBottomTabsScenario() {
+export function StackInTabsScenario() {
   const [config, setConfig] = useState<ScrollEdgeEffects>({
     ...SCROLL_EDGE_EFFECT_DEFAULTS,
   });
 
-  // Add ScrollView for automatic insets which are missing in BottomTabsScreen
+  // Add ScrollView for automatic insets which are missing in TabsScreen
   const ConfigComponent = useCallback(
     () => (
       <ScrollView>
-        <Config title="Outer BottomTabs / scrollEdgeEffects:" />
+        <Config title="Outer Tabs / scrollEdgeEffects:" />
       </ScrollView>
     ),
     [],
@@ -28,20 +28,20 @@ export function StackInBottomTabsScenario() {
   return (
     <ScrollEdgeEffectsConfigContext.Provider value={{ config, setConfig }}>
       <NavigationContainer>
-        <BottomTabsContainer
+        <TabsContainer
           tabConfigs={[
             {
               component: ConfigComponent,
-              tabScreenProps: { screenKey: 'config', title: 'Config' },
+              options: { screenKey: 'config', title: 'Config' },
             },
             {
               component: StackScenario,
-              tabScreenProps: {
+              options: {
                 screenKey: 'stack',
                 title: 'Stack',
                 ios: {
                   scrollEdgeEffects: config,
-                }
+                },
               },
             },
           ]}

apps/src/tests/issue-tests/Test3212/BottomTabsInStackScenario.tsx

@@ -0,0 +1,44 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import React, { useCallback, useState } from 'react';
+import {
+  SCROLL_EDGE_EFFECT_DEFAULTS,
+  ScrollEdgeEffects,
+  ScrollEdgeEffectsConfigContext,
+} from './context';
+import { NavigationContainer } from '@react-navigation/native';
+import { ConfigWithNavigation } from './Config';
+import { TabsScenario } from './TabsScenario';
+
+export function TabsInStackScenario() {
+  const Stack = createNativeStackNavigator();
+  const [config, setConfig] = useState<ScrollEdgeEffects>({
+    ...SCROLL_EDGE_EFFECT_DEFAULTS,
+  });
+
+  const ConfigComponent = useCallback(
+    () => <ConfigWithNavigation title="Outer Stack / scrollEdgeEffects:" />,
+    [],
+  );
+
+  return (
+    <ScrollEdgeEffectsConfigContext.Provider value={{ config, setConfig }}>
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            autoHideHomeIndicator: true,
+          }}>
+          <Stack.Screen name="Config" component={ConfigComponent} />
+          <Stack.Screen
+            name="Test"
+            component={TabsScenario}
+            options={{
+              scrollEdgeEffects: config,
+              headerSearchBarOptions: {},
+              headerTransparent: true,
+            }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </ScrollEdgeEffectsConfigContext.Provider>
+  );
+}

…s/Test3212/StackInBottomTabsScenario.tsx …e-tests/Test3212/StackInTabsScenario.tsxapps/src/tests/issue-tests/Test3212/StackInBottomTabsScenario.tsx renamed to apps/src/tests/issue-tests/Test3212/StackInTabsScenario.tsx apps/src/tests/issue-tests/Test3212/StackInBottomTabsScenario.tsx renamed to apps/src/tests/issue-tests/Test3212/StackInTabsScenario.tsx

@@ -8,21 +8,21 @@ import {
   NavigationContainer,
   NavigationIndependentTree,
 } from '@react-navigation/native';
-import { BottomTabsContainer } from '../../../shared/gamma/containers/bottom-tabs/BottomTabsContainer';
+import { TabsContainer } from '../../../shared/gamma/containers/tabs/TabsContainer';
 import { Config } from './Config';
 import { ScrollViewTemplate } from './ScrollViewTemplate';
 import { ScrollView } from 'react-native';
 
 function ConfigComponent() {
-  // Add ScrollView for automatic insets which are missing in BottomTabsScreen
+  // Add ScrollView for automatic insets which are missing in TabsScreen
   return (
     <ScrollView>
       <Config title="Stack / scrollEdgeEffects:" />
     </ScrollView>
   );
 }
 
-export function BottomTabsScenario() {
+export function TabsScenario() {
   const [config, setConfig] = useState<ScrollEdgeEffects>({
     ...SCROLL_EDGE_EFFECT_DEFAULTS,
   });
@@ -31,20 +31,20 @@ export function BottomTabsScenario() {
     <NavigationIndependentTree>
       <ScrollEdgeEffectsConfigContext.Provider value={{ config, setConfig }}>
         <NavigationContainer>
-          <BottomTabsContainer
+          <TabsContainer
             tabConfigs={[
               {
                 component: ConfigComponent,
-                tabScreenProps: { screenKey: 'config', title: 'Config' },
+                options: { screenKey: 'config', title: 'Config' },
               },
               {
                 component: ScrollViewTemplate,
-                tabScreenProps: {
+                options: {
                   screenKey: 'stack',
                   title: 'Scroll',
                   ios: {
                     scrollEdgeEffects: config,
-                  }
+                  },
                 },
               },
             ]}