chore(test): new test-tabs-controller-mode-ios with scenario

apps/src/tests/single-feature-tests/tabs/index.ts

@@ -12,6 +12,7 @@ import TestTabsSimpleNav from './test-tabs-simple-nav';
 import TestTabsMoreNavigationController from './test-tabs-more-navigation-controller';
 import TestTabsStaleStateUpdateRejection from './test-tabs-stale-update-rejection';
 import TestTabsTabBarMinimizeBehavior from './test-tabs-tab-bar-minimize-behavior-ios';
+import TestTabsTabBarControllerMode from './test-tabs-tab-bar-controller-mode-ios';
 
 const scenarios = {
   BottomAccessoryScenario,
@@ -26,6 +27,7 @@ const scenarios = {
   TestTabsMoreNavigationController,
   TestTabsStaleStateUpdateRejection,
   TestTabsTabBarMinimizeBehavior,
+  TestTabsTabBarControllerMode,
 };
 
 const TabsScenarioGroup: ScenarioGroup<keyof typeof scenarios> = {

apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx

@@ -0,0 +1,125 @@
+import {
+    TabsContainerWithHostConfigContext,
+    type TabRouteConfig,
+    useTabsHostConfig,
+    DEFAULT_TAB_ROUTE_OPTIONS,
+} from '@apps/shared/gamma/containers/tabs';
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { Scenario } from '@apps/tests/shared/helpers';
+import { SettingsPicker } from '@apps/shared';
+import {TabBarControllerMode } from 'react-native-screens';
+
+const SCENARIO: Scenario = {
+    name: 'Tab Bar Controller Mode',
+    key: 'test-tabs-tab-bar-controller-mode-ios',
+    details: 'Test different tab bar modes.',
+    platforms: ['ios'],
+    AppComponent: App,
+};
+
+export default SCENARIO;
+
+function ConfigScreen() {
+    const { hostConfig, updateHostConfig } = useTabsHostConfig();
+    return (
+        <ScrollView style={{ padding: 40 }}>
+            <View>
+                <Text style={styles.description}>
+                    Controls whether the tab bar is displayed as a bar or
+                    sidebar.{'\n'}Test tabSidebar on iPad — on iPhone it collapses
+                    back to a tab bar automatically.
+                </Text>
+                <SettingsPicker<TabBarControllerMode>
+                    label="tabBarControllerMode"
+                    value={hostConfig.ios?.tabBarControllerMode ?? 'automatic'}
+                    onValueChange={value =>
+                        updateHostConfig({ ios: { tabBarControllerMode: value } })
+                    }
+                    items={['automatic', 'tabBar', 'tabSidebar']}
+                />
+        </View>
+        </ScrollView >
+    );
+}
+
+function TestScreen() {
+    return (
+        <ScrollView
+            style={{ flex: 1 }}
+            contentInsetAdjustmentBehavior="automatic"
+            testID="test-screen-scroll">
+            {Array.from({ length: 40 }, (_, i) => (
+                <View key={i} style={styles.scrollItem}>
+                    <Text>Row {i + 1} — scroll to test tabBarMinimizeBehavior</Text>
+                </View>
+            ))}
+        </ScrollView>
+    );
+};
+
+const ROUTE_CONFIGS: TabRouteConfig[] = [
+    {
+        name: 'Tab1',
+        Component: ConfigScreen,
+        options: {
+            ...DEFAULT_TAB_ROUTE_OPTIONS,
+            title: 'Tab1',
+        },
+    },
+    {
+        name: 'Tab2',
+        Component: TestScreen,
+        options: {
+            ...DEFAULT_TAB_ROUTE_OPTIONS,
+            title: 'Tab2',
+
+        },
+    },
+];
+
+export function App() {
+    return <TabsContainerWithHostConfigContext routeConfigs={ROUTE_CONFIGS} />;
+};
+
+const styles = {
+    sectionHeader: {
+        fontSize: 13,
+        fontWeight: '600' as const,
+        textTransform: 'uppercase' as const,
+        color: '#888',
+        letterSpacing: 0.5,
+        marginTop: 24,
+        marginBottom: 4,
+    },
+    description: {
+        fontSize: 13,
+        color: '#555',
+        marginBottom: 6,
+        marginTop: 12,
+        textAlign: 'center' as const,
+    },
+    scrollItem: {
+        padding: 16,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#e0e0e0',
+    },
+    centeredScreen: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+        gap: 12,
+    },
+    screenLabel: {
+        fontSize: 17,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    screenHint: {
+        fontSize: 14,
+        color: '#555',
+        textAlign: 'center',
+        lineHeight: 20,
+    },
+}

apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md

@@ -0,0 +1,76 @@
+# Test Scenario: tabBarControllerMode
+
+**E2E:** Not automated - test will be added at least for iPad to check sidebar visibility.
+
+## Prerequisites
+
+- iPhone simulator or device
+- iPad simulator or device (required for `tabSidebar` mode)
+- iOS 18+
+
+## Steps
+
+### iPad
+
+1. Launch the app and navigate to the **Tab Bar Controller Mode** screen.
+
+- [ ] Expected: Tab bar displayed at the top with Tab1 and Tab2. Picker defaults to `automatic`
+
+2. Ensure that tabBarControllerMode = `automatic`
+
+- [ ] Expected: Tab bar displayed according to iPadOS default behavior for current orientation
+
+3. Change app window size to correspond to iPhone view.
+
+- [ ] Expected: Tab bar displayed at the **bottom**
+
+4. Resize app to full screen.
+   Set tabBarControllerMode = `tabBar`
+
+- [ ] Expected: Tab bar displayed without sidebar option - even if iPadOS would default do it
+
+5. Change app window size to correspond to iPhone view.
+
+- [ ] Expected: Tab bar displayed at the **bottom**
+
+6. Resize app to full screen.
+   Set tabBarControllerMode = `tabSidebar`, test on **iPad landscape** orientation
+
+- [ ] Expected: Navigation displayed as a **sidebar** on the leading edge
+
+7. Keep tabBarControllerMode = `tabSidebar`, test on **iPad portrait**
+
+- [ ] Expected: Sidebar adapts or collapses — tab items still accessible
+
+8. Change app window size to correspond to iPhone view.
+
+- [ ] Expected: Tab bar displayed at the **bottom** without sidebar option.
+
+9. Resize app to full screen.
+   Cycle through `automatic` → `tabBar` → `tabSidebar` → `automatic`
+
+- [ ] Expected: UI transitions immediately with each change, no crash or layout freeze
+
+10. Switch tabs (Tab1 ↔ Tab2) while cycling through all modes.
+
+- [ ] Expected: Tab switching works correctly in all three modes.
+
+---
+
+### Simple check on iPhone
+
+11. Launch the app and navigate to the **Tab Bar Controller Mode** screen.
+
+- [ ] Expected: Tab bar displayed at the bottom with Tab1 and Tab2. Picker defaults to `automatic`
+
+12.   Set tabBarControllerMode = `automatic`
+
+- [ ] Expected: Tab bar displayed at the **bottom**
+
+13.  Set tabBarControllerMode = `tabBar`
+
+- [ ] Expected: Tab bar displayed at the **bottom**
+
+14.  Set tabBarControllerMode = `tabSidebar`
+
+- [ ] Expected: Tab bar displayed at the **bottom**