From 4b9d161d125785e010ac97bd6be711247e97a372 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Wed, 8 Apr 2026 08:39:52 +0200 Subject: [PATCH 1/6] chore(test): new test-tabs-controller-mode-ios test with scenario --- .../test-tabs-controller-mode-ios/index.tsx | 123 ++++++++++++++++++ .../test-tabs-controller-mode-ios/scenario.md | 77 +++++++++++ 2 files changed, 200 insertions(+) create mode 100644 apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx create mode 100644 apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/scenario.md diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx new file mode 100644 index 0000000000..8cfa0f693c --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx @@ -0,0 +1,123 @@ +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-controller-mode-ios', + platforms: ['ios'], + AppComponent: App, +}; + +export default SCENARIO; + +function ConfigScreen() { + const { hostConfig, updateHostConfig } = useTabsHostConfig(); + return ( + + + + Controls whether the tab bar is displayed as a bar or + sidebar. Test tabSidebar on iPad — on iPhone it collapses + back to a tab bar automatically. + + + label="tabBarControllerMode" + value={hostConfig.ios?.tabBarControllerMode ?? 'automatic'} + onValueChange={value => + updateHostConfig({ ios: { tabBarControllerMode: value } }) + } + items={['automatic', 'tabBar', 'tabSidebar']} + /> + + + ); +} + +function TestScreen() { + return ( + + {Array.from({ length: 40 }, (_, i) => ( + + Row {i + 1} — scroll to test tabBarMinimizeBehavior + + ))} + + ); +}; + +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 ; +}; + +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, + }, + 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, + }, +} \ No newline at end of file diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/scenario.md new file mode 100644 index 0000000000..df7ad7e12a --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/scenario.md @@ -0,0 +1,77 @@ +# Test Scenario: tabBarControllerMode + +**E2E:** No + +## Prerequisites + +- iPhone simulator or device +- iPad simulator or device (required for `tabSidebar` mode) +- iOS 18+ + +Assumption: + +- default iPadOS and iPhone behavior is working correctly. +- Here only the `tabBarControllerMode` prop on TabsHost is tested, verified against different device types. + +## Steps + +### iPad + +1. Launch the app and navigate to the scenario + +- [ ] Expected: Tab bar displayed at the bottom with Tab1 and Tab2. Picker defaults to `automatic` + +2. Set 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 TabsHost tabBarControllerMode = `tabSidebar`,test on **iPad landscape** orientation + +- [ ] Expected: Navigation displayed as a **sidebar** on the leading edge + +7. Keep TabsHost 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 without sidebar option. + +9. Resize app to full screen. + Cycle through `automatic` → `tabBar` → `tabSidebar` → `automatic` on iPad + +- [ ] 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 + +1. Set TabsHost tabBarControllerMode = `automatic` + +- [ ] Expected: Tab bar displayed at the **bottom** + +2. Set TabsHost tabBarControllerMode = `tabBar` + +- [ ] Expected: Tab bar displayed at the **bottom** + +3. Set TabsHost tabBarControllerMode = `tabSidebar` + +- [ ] Expected: Tab bar displayed at the **bottom** \ No newline at end of file From 413b574969d5f6422dfd9c71daf33aabd6983ce5 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Wed, 8 Apr 2026 08:53:30 +0200 Subject: [PATCH 2/6] tab index file with new test-tabs-controller-mode-ios update --- apps/src/tests/single-feature-tests/tabs/index.ts | 2 ++ .../tabs/test-tabs-controller-mode-ios/index.tsx | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index 084e439da9..ba99252831 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -11,6 +11,7 @@ import TestTabsIMEInsets from './test-tabs-ime-insets'; import TestTabsSimpleNav from './test-tabs-simple-nav'; import TestTabsMoreNavigationController from './test-tabs-more-navigation-controller'; import TestTabsStaleStateUpdateRejection from './test-tabs-stale-update-rejection'; +import TestTabsControllerMode from './test-tabs-controller-mode-ios'; const scenarios = { BottomAccessoryScenario, @@ -24,6 +25,7 @@ const scenarios = { TestTabsSimpleNav, TestTabsMoreNavigationController, TestTabsStaleStateUpdateRejection, + TestTabsControllerMode, }; const TabsScenarioGroup: ScenarioGroup = { diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx index 8cfa0f693c..30c0386594 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx @@ -13,6 +13,7 @@ import {TabBarControllerMode } from 'react-native-screens'; const SCENARIO: Scenario = { name: 'Tab Bar Controller Mode', key: 'test-tabs-controller-mode-ios', + details: 'Test different tabBarControllerMode values.', platforms: ['ios'], AppComponent: App, }; @@ -26,7 +27,8 @@ function ConfigScreen() { Controls whether the tab bar is displayed as a bar or - sidebar. Test tabSidebar on iPad — on iPhone it collapses + sidebar. + {'\n'}Test tabSidebar on iPad — on iPhone it collapses back to a tab bar automatically. @@ -96,6 +98,7 @@ const styles = { color: '#555', marginBottom: 6, marginTop: 12, + textAlign: 'center' as const, }, scrollItem: { padding: 16, From 02981ecda1cfea9dc30404740bb0af1e4f735902 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Wed, 8 Apr 2026 09:32:46 +0200 Subject: [PATCH 3/6] change in description --- .../tabs/test-tabs-controller-mode-ios/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx index 30c0386594..711bcfb3eb 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx @@ -13,7 +13,7 @@ import {TabBarControllerMode } from 'react-native-screens'; const SCENARIO: Scenario = { name: 'Tab Bar Controller Mode', key: 'test-tabs-controller-mode-ios', - details: 'Test different tabBarControllerMode values.', + details: 'Test different tab bar modes.', platforms: ['ios'], AppComponent: App, }; From 738291c24fcb9f47a7a4a190d3b3dae0aaaa6e58 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Wed, 8 Apr 2026 15:14:03 +0200 Subject: [PATCH 4/6] scenario and name changes --- .../tests/single-feature-tests/tabs/index.ts | 4 +-- .../index.tsx | 5 ++- .../scenario.md | 31 +++++++++---------- 3 files changed, 19 insertions(+), 21 deletions(-) rename apps/src/tests/single-feature-tests/tabs/{test-tabs-controller-mode-ios => test-tabs-tab-bar-controller-mode-ios}/index.tsx (95%) rename apps/src/tests/single-feature-tests/tabs/{test-tabs-controller-mode-ios => test-tabs-tab-bar-controller-mode-ios}/scenario.md (66%) diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index 2970a88d23..d315884777 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -12,7 +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 TestTabsControllerMode from './test-tabs-controller-mode-ios'; +import TestTabsTabBarControllerMode from './test-tabs-tab-bar-controller-mode-ios'; const scenarios = { BottomAccessoryScenario, @@ -27,7 +27,7 @@ const scenarios = { TestTabsMoreNavigationController, TestTabsStaleStateUpdateRejection, TestTabsTabBarMinimizeBehavior, - TestTabsControllerMode, + TestTabsTabBarControllerMode, }; const TabsScenarioGroup: ScenarioGroup = { diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx similarity index 95% rename from apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx rename to apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx index 711bcfb3eb..9a8875cb18 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx @@ -12,7 +12,7 @@ import {TabBarControllerMode } from 'react-native-screens'; const SCENARIO: Scenario = { name: 'Tab Bar Controller Mode', - key: 'test-tabs-controller-mode-ios', + key: 'test-tabs-tab-bar-controller-mode-ios', details: 'Test different tab bar modes.', platforms: ['ios'], AppComponent: App, @@ -27,8 +27,7 @@ function ConfigScreen() { Controls whether the tab bar is displayed as a bar or - sidebar. - {'\n'}Test tabSidebar on iPad — on iPhone it collapses + sidebar.{'\n'}Test tabSidebar on iPad — on iPhone it collapses back to a tab bar automatically. diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md similarity index 66% rename from apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/scenario.md rename to apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md index df7ad7e12a..875a738cd0 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-controller-mode-ios/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md @@ -1,6 +1,6 @@ # Test Scenario: tabBarControllerMode -**E2E:** No +**E2E:** Not automated - test will be added at least for iPad to check sidebar visibility. ## Prerequisites @@ -8,18 +8,13 @@ - iPad simulator or device (required for `tabSidebar` mode) - iOS 18+ -Assumption: - -- default iPadOS and iPhone behavior is working correctly. -- Here only the `tabBarControllerMode` prop on TabsHost is tested, verified against different device types. - ## Steps ### iPad -1. Launch the app and navigate to the scenario +1. 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` +- [ ] Expected: Tab bar displayed at the top with Tab1 and Tab2. Picker defaults to `automatic` 2. Set tabBarControllerMode = `automatic` @@ -39,39 +34,43 @@ Assumption: - [ ] Expected: Tab bar displayed at the **bottom** 6. Resize app to full screen. - Set TabsHost tabBarControllerMode = `tabSidebar`,test on **iPad landscape** orientation + Set tabBarControllerMode = `tabSidebar`,test on **iPad landscape** orientation - [ ] Expected: Navigation displayed as a **sidebar** on the leading edge -7. Keep TabsHost tabBarControllerMode = `tabSidebar`, test on **iPad portrait** +1. 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 without sidebar option. +- [ ] Expected: Tab bar displayed at the **bottom** without sidebar option. 9. Resize app to full screen. Cycle through `automatic` → `tabBar` → `tabSidebar` → `automatic` on iPad - [ ] Expected: UI transitions immediately with each change, no crash or layout freeze -10. Switch tabs (Tab1 ↔ Tab2) while cycling through all modes +10. Switch tabs (Tab1 ↔ Tab2) while cycling through all modes. -- [ ] Expected: Tab switching works correctly in all three modes +- [ ] Expected: Tab switching works correctly in all three modes. --- ### Simple check on iPhone -1. Set TabsHost tabBarControllerMode = `automatic` +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** -2. Set TabsHost tabBarControllerMode = `tabBar` +13. Set tabBarControllerMode = `tabBar` - [ ] Expected: Tab bar displayed at the **bottom** -3. Set TabsHost tabBarControllerMode = `tabSidebar` +14. Set tabBarControllerMode = `tabSidebar` - [ ] Expected: Tab bar displayed at the **bottom** \ No newline at end of file From dfff6118ad121986a17261d881bab8779d6f32b4 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Wed, 8 Apr 2026 15:43:55 +0200 Subject: [PATCH 5/6] small changes in scenario --- .../test-tabs-tab-bar-controller-mode-ios/scenario.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md index 875a738cd0..506508dcd8 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md @@ -16,7 +16,7 @@ - [ ] Expected: Tab bar displayed at the top with Tab1 and Tab2. Picker defaults to `automatic` -2. Set tabBarControllerMode = `automatic` +2. Ensure that tabBarControllerMode = `automatic` - [ ] Expected: Tab bar displayed according to iPadOS default behavior for current orientation @@ -34,11 +34,11 @@ - [ ] Expected: Tab bar displayed at the **bottom** 6. Resize app to full screen. - Set tabBarControllerMode = `tabSidebar`,test on **iPad landscape** orientation + Set tabBarControllerMode = `tabSidebar`, test on **iPad landscape** orientation - [ ] Expected: Navigation displayed as a **sidebar** on the leading edge -1. Keep tabBarControllerMode = `tabSidebar`, test on **iPad portrait** +7. Keep tabBarControllerMode = `tabSidebar`, test on **iPad portrait** - [ ] Expected: Sidebar adapts or collapses — tab items still accessible @@ -47,11 +47,11 @@ - [ ] Expected: Tab bar displayed at the **bottom** without sidebar option. 9. Resize app to full screen. - Cycle through `automatic` → `tabBar` → `tabSidebar` → `automatic` on iPad + 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. +10. Switch tabs (Tab1 ↔ Tab2) while cycling through all modes. - [ ] Expected: Tab switching works correctly in all three modes. From 430036535c9490632b851a7b32a07b53c47c126d Mon Sep 17 00:00:00 2001 From: Lucyna K <45803783+LKuchno@users.noreply.github.com> Date: Thu, 9 Apr 2026 11:01:40 +0200 Subject: [PATCH 6/6] Update apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx Co-authored-by: Kacper Kafara --- .../tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx index 9a8875cb18..863789f4de 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx @@ -122,4 +122,4 @@ const styles = { textAlign: 'center', lineHeight: 20, }, -} \ No newline at end of file +}