From f70fcbaa6b4f57946546c2eb52417161a6cc9572 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 8 Jun 2026 12:54:15 +0200 Subject: [PATCH 01/11] chore(test): test-tabs-native-container-style screen with scenario --- .../tests/single-feature-tests/tabs/index.ts | 2 + .../index.tsx | 185 ++++++++++++++++++ .../scenario-description.ts | 10 + .../scenario.md | 113 +++++++++++ 4 files changed, 310 insertions(+) create mode 100644 apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx create mode 100644 apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts create mode 100644 apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index 318fadaa08..516eefe149 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -18,6 +18,7 @@ import TestTabsSpecialEffectsScrollToTop from './test-tabs-special-effects-scrol import TestTabsTabBarExperimentalUserInterfaceStyle from './test-tabs-tab-bar-experimental-user-interface-style-ios'; import TestTabsLifecycleEvents from './test-tabs-lifecycle-events'; import TestTabsItemTitle from './test-tabs-item-title-ios'; +import TestTabsNativeContainerStyle from './test-tabs-native-container-style'; const scenarios = { TestTabBottomAccessory, @@ -38,6 +39,7 @@ const scenarios = { TestTabsTabBarExperimentalUserInterfaceStyle, TestTabsLifecycleEvents, TestTabsItemTitle, + TestTabsNativeContainerStyle, }; const TabsScenarioGroup: ScenarioGroup = { diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx new file mode 100644 index 0000000000..26f0817ee3 --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx @@ -0,0 +1,185 @@ +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 { scenarioDescription } from './scenario-description'; +import { createScenario } from '@apps/tests/shared/helpers'; +import { SettingsPicker } from '@apps/shared'; +import { Colors } from '@apps/shared/styling'; +import type { ColorValue } from 'react-native'; + +type ContainerBackgroundOption = 'unset' | 'blue' | 'yellow'; + +function ConfigScreen() { + const { hostConfig, updateHostConfig } = useTabsHostConfig(); + + const getBackgroundColor = ( + option: ContainerBackgroundOption + ): ColorValue | undefined => { + switch (option) { + case 'blue': + return Colors.BlueLight100; + case 'yellow': + return Colors.YellowLight100; + case 'unset': + default: + return undefined; + } + }; + + const currentOption = (() => { + const bgColor = hostConfig.nativeContainerStyle?.backgroundColor; + if (bgColor === Colors.BlueLight100) return 'blue'; + if (bgColor === Colors.YellowLight100) return 'yellow'; + return 'unset'; + })(); + + return ( + + + nativeContainerStyle + + Controls the background color of the native container. + + + + + + {'•'} On Android: Color + is applied to the FrameLayout that wraps the focused screen and + BottomNavigationView + + + + + + {'•'} On iOS: Color is + applied to the UITabBarController's view + + + + + Background Color + + label="backgroundColor" + value={currentOption} + onValueChange={option => { + updateHostConfig({ + nativeContainerStyle: { + backgroundColor: getBackgroundColor(option), + }, + }); + }} + items={['unset', 'blue', 'yellow']} + /> + + + ); +} + +function TabScreen() { + return ( + + Tab + + Observe the container background color behind this tab content and around the tab bar. + + + ); +} + +const ROUTE_CONFIGS: TabRouteConfig[] = [ + { + name: 'Config', + Component: ConfigScreen, + options: { + ...DEFAULT_TAB_ROUTE_OPTIONS, + title: 'Config', + }, + }, + { + name: 'Tab', + Component: TabScreen, + options: { + ...DEFAULT_TAB_ROUTE_OPTIONS, + title: 'Tab', + android: { + ...DEFAULT_TAB_ROUTE_OPTIONS.android, + standardAppearance: { + tabBarBackgroundColor: 'transparent', + }, + }, + }, + }, +]; + +export function App() { + return ; +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + content: { + padding: 16, + }, + section: { + marginBottom: 16, + }, + heading: { + fontSize: 18, + fontWeight: '600', + color: Colors.OffNavy, + marginBottom: 8, + }, + description: { + fontSize: 14, + color: Colors.LightOffNavy, + marginBottom: 8, + }, + text: { + fontSize: 13, + color: Colors.LightOffNavy, + lineHeight: 20, + }, + label: { + fontSize: 13, + fontWeight: '600', + color: Colors.LightOffNavy, + marginBottom: 4, + }, + value: { + fontSize: 13, + color: Colors.OffNavy, + fontFamily: 'Menlo', + backgroundColor: Colors.OffWhite, + paddingHorizontal: 8, + paddingVertical: 4, + }, + centeredContent: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + paddingHorizontal: 24, + gap: 12, + }, + contentLabel: { + fontSize: 18, + fontWeight: '600', + color: Colors.OffNavy, + textAlign: 'center', + }, + contentHint: { + fontSize: 13, + color: Colors.LightOffNavy, + textAlign: 'center', + lineHeight: 20, + }, +}); + +export default createScenario(App, scenarioDescription); diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts new file mode 100644 index 0000000000..f3008ddc48 --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts @@ -0,0 +1,10 @@ +import type { ScenarioDescription } from '@apps/tests/shared/helpers'; + +export const scenarioDescription: ScenarioDescription = { + name: 'Native Container Style', + key: 'test-tabs-native-container-style', + details: 'Tests the nativeContainerStyle prop with backgroundColor variations on the TabsContainer.', + platforms: ['android', 'ios'], + e2eCoverage: 'incomplete', + smokeTest: false, +}; diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md new file mode 100644 index 0000000000..7759f8dcd9 --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md @@ -0,0 +1,113 @@ +# Test Scenario: nativeContainerStyle + +## Details + +**Description:** Verifies the `nativeContainerStyle` prop on `TabsHost`, +which allows customising the background color of the native container +wrapping the tabs. The test validates that setting `backgroundColor` +via the picker applies the color to the correct native surface on each +platform, that the color persists when switching between tabs, and that +restoring `unset` returns the container to the system default. The prop +is a host-level setting: it is not per-route. + +Platform surfaces affected: +- **iOS** — applied to the `UITabBarController`'s root view (behind + both the content area and the tab bar). +- **Android** — applied to the `FrameLayout` that wraps the currently + focused screen and the `BottomNavigationView`. + +**OS test creation version:** iOS: 18.6 and 26.5, Android: API Level 36. + +## E2E test + +Incomplete: Not automated. Detox cannot assert native background-color +attributes on either platform, so visual verification must be done +manually. + +## Prerequisites + +- iOS device or simulator +- Android emulator or device + +## Note + +- The color change applies immediately upon selecting a new value; no + restart is required. +- On iOS the color fills the area behind the content screen and around + the tab bar (the full `UITabBarController` view). The tab bar itself + may partially obscure the color unless the tab bar has a transparent + or semi-transparent background. +- On Android the color fills the `FrameLayout` container, which is + visible in the gutters around the focused screen content and behind + the `BottomNavigationView`. + +## Steps + +### Baseline + +1. Launch the app and navigate to **Native Container Style**. + +- [ ] The **Config** tab is active. The `backgroundColor` + picker shows `unset`. The container background is the system default + (no custom color visible). + +--- + +### Setting backgroundColor to blue and yellow + +2. On the **Config** tab, set the `backgroundColor` picker to `blue`. + +- [ ] The picker displays `blue`. The native container's background immediately changes to blue. +- [ ] **iOS18:** The blue color is visible behind both the tab content area and the tab bar area, as tabBarBackgroundColor is transparent. +- [ ] **iOS26:** The blue color is visible behind the tab content area and through the liquid glass tab bar. +- [ ] **Android:** The blue color is visible in the area surrounding the focused content screen. The tab bar retains the system default background color. + +3. Tap the **Tab** tab in the tab bar. + +- [ ] The **Tab** screen content is displayed (featuring the "Tab" label and + hint text). +- [ ] The container background remains blue. +- [ ] **iOS:** The appearance of the tab bar area is identical to the previous step. +- [ ] **Android:** The tab bar is transparent, making the blue background visible behind the tabs. + +4. Tap the **Config** tab to switch back. + +- [ ] The **Config** tab is shown again. +- [ ] The `backgroundColor` picker still shows `blue`. +- [ ] The blue container background persists. + +5. Set the `backgroundColor` picker to `yellow`. + +- [ ] The container background changes immediately to yellow. +- [ ] The blue color is no longer visible. + +6. Tap the **Tab** tab, observe the background, then return to **Config**. + +- [ ] The yellow background is visible on the **Tab** screen and remains after switching back to **Config**. +- [ ] The picker still shows `yellow`. + +--- + +### Restoring to unset + +7. Set the `backgroundColor` picker back to `unset`. + +- [ ] The container background returns to the system default. +- [ ] No custom color is visible. +- [ ] The picker shows `unset`. + +8. Tap the **Tab** tab and observe the background. + +- [ ] The **Tab** screen appears with the system-default container background. +- [ ] No color remnant from the previous `yellow` value is visible. + +--- + +### Rapid color cycling (edge case) + +9. From the **Config** tab, cycle the `backgroundColor` picker rapidly + through `blue` → `yellow` → `unset` → `blue`. + +- [ ] The container background updates with each selection. +- [ ] No crash, no layout freeze, and no color bleed between selections. +- [ ] The final displayed color is blue. From 713cbba4ea74968a081ecec878165495805282db Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 8 Jun 2026 12:55:16 +0200 Subject: [PATCH 02/11] space added to ios18 ios26 --- .../tabs/test-tabs-native-container-style/scenario.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md index 7759f8dcd9..74c3b1ef9c 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md @@ -58,8 +58,8 @@ manually. 2. On the **Config** tab, set the `backgroundColor` picker to `blue`. - [ ] The picker displays `blue`. The native container's background immediately changes to blue. -- [ ] **iOS18:** The blue color is visible behind both the tab content area and the tab bar area, as tabBarBackgroundColor is transparent. -- [ ] **iOS26:** The blue color is visible behind the tab content area and through the liquid glass tab bar. +- [ ] **iOS 18:** The blue color is visible behind both the tab content area and the tab bar area, as tabBarBackgroundColor is transparent. +- [ ] **iOS 26:** The blue color is visible behind the tab content area and through the liquid glass tab bar. - [ ] **Android:** The blue color is visible in the area surrounding the focused content screen. The tab bar retains the system default background color. 3. Tap the **Tab** tab in the tab bar. From 3398aaa0299a63c0872d2923b916de445ac46c4d Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 8 Jun 2026 13:06:07 +0200 Subject: [PATCH 03/11] adjustment after code review --- .../test-tabs-native-container-style/index.tsx | 14 ++++++++++++-- .../test-tabs-native-container-style/scenario.md | 2 +- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx index 26f0817ee3..78e90d37c0 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx @@ -12,7 +12,7 @@ import { SettingsPicker } from '@apps/shared'; import { Colors } from '@apps/shared/styling'; import type { ColorValue } from 'react-native'; -type ContainerBackgroundOption = 'unset' | 'blue' | 'yellow'; +type ContainerBackgroundOption = 'unset' | 'blue' | 'yellow' | 'purple'; function ConfigScreen() { const { hostConfig, updateHostConfig } = useTabsHostConfig(); @@ -25,6 +25,8 @@ function ConfigScreen() { return Colors.BlueLight100; case 'yellow': return Colors.YellowLight100; + case 'purple': + return Colors.PurpleLight100; case 'unset': default: return undefined; @@ -35,6 +37,13 @@ function ConfigScreen() { const bgColor = hostConfig.nativeContainerStyle?.backgroundColor; if (bgColor === Colors.BlueLight100) return 'blue'; if (bgColor === Colors.YellowLight100) return 'yellow'; + if (bgColor === Colors.PurpleLight100) return 'purple'; + if (bgColor !== undefined) { + console.warn( + `[test-tabs-native-container-style] Unrecognized nativeContainerStyle.backgroundColor: ${String(bgColor)}. ` + + `Picker shows 'unset' but a native color may be set. This may indicate a platform-specific color serialization issue.` + ); + } return 'unset'; })(); @@ -74,7 +83,7 @@ function ConfigScreen() { }, }); }} - items={['unset', 'blue', 'yellow']} + items={['unset', 'blue', 'yellow', 'purple']} /> @@ -124,6 +133,7 @@ export function App() { const styles = StyleSheet.create({ container: { flex: 1, + paddingTop: 18, }, content: { padding: 16, diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md index 74c3b1ef9c..2375375ea6 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md @@ -106,7 +106,7 @@ manually. ### Rapid color cycling (edge case) 9. From the **Config** tab, cycle the `backgroundColor` picker rapidly - through `blue` → `yellow` → `unset` → `blue`. + through `blue` → `yellow` → `purple` → `unset` → `blue`. - [ ] The container background updates with each selection. - [ ] No crash, no layout freeze, and no color bleed between selections. From e7a460c13340e1b7c1a85481e1e72e843f21f562 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Tue, 9 Jun 2026 13:44:59 +0200 Subject: [PATCH 04/11] index and scenario-description small adjustment after AI review --- .../tabs/test-tabs-native-container-style/index.tsx | 10 +--------- .../scenario-description.ts | 2 +- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx index 78e90d37c0..14f01934d7 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx @@ -5,13 +5,11 @@ import { DEFAULT_TAB_ROUTE_OPTIONS, } from '@apps/shared/gamma/containers/tabs'; import React from 'react'; -import { View, Text, ScrollView, StyleSheet } from 'react-native'; +import { View, Text, ScrollView, StyleSheet, type ColorValue } from 'react-native'; import { scenarioDescription } from './scenario-description'; import { createScenario } from '@apps/tests/shared/helpers'; import { SettingsPicker } from '@apps/shared'; import { Colors } from '@apps/shared/styling'; -import type { ColorValue } from 'react-native'; - type ContainerBackgroundOption = 'unset' | 'blue' | 'yellow' | 'purple'; function ConfigScreen() { @@ -38,12 +36,6 @@ function ConfigScreen() { if (bgColor === Colors.BlueLight100) return 'blue'; if (bgColor === Colors.YellowLight100) return 'yellow'; if (bgColor === Colors.PurpleLight100) return 'purple'; - if (bgColor !== undefined) { - console.warn( - `[test-tabs-native-container-style] Unrecognized nativeContainerStyle.backgroundColor: ${String(bgColor)}. ` + - `Picker shows 'unset' but a native color may be set. This may indicate a platform-specific color serialization issue.` - ); - } return 'unset'; })(); diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts index f3008ddc48..683e3ed279 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts @@ -3,7 +3,7 @@ import type { ScenarioDescription } from '@apps/tests/shared/helpers'; export const scenarioDescription: ScenarioDescription = { name: 'Native Container Style', key: 'test-tabs-native-container-style', - details: 'Tests the nativeContainerStyle prop with backgroundColor variations on the TabsContainer.', + details: 'Tests the nativeContainerStyle prop with backgroundColor variations on TabsHost.', platforms: ['android', 'ios'], e2eCoverage: 'incomplete', smokeTest: false, From dc59aa2d0469c219ea2accaa41ea17adff0e871e Mon Sep 17 00:00:00 2001 From: lkuchno Date: Tue, 9 Jun 2026 14:29:27 +0200 Subject: [PATCH 05/11] delete repeated informations --- .../tabs/test-tabs-native-container-style/scenario.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md index 2375375ea6..961855e84c 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md @@ -10,12 +10,6 @@ platform, that the color persists when switching between tabs, and that restoring `unset` returns the container to the system default. The prop is a host-level setting: it is not per-route. -Platform surfaces affected: -- **iOS** — applied to the `UITabBarController`'s root view (behind - both the content area and the tab bar). -- **Android** — applied to the `FrameLayout` that wraps the currently - focused screen and the `BottomNavigationView`. - **OS test creation version:** iOS: 18.6 and 26.5, Android: API Level 36. ## E2E test From d23fe9078e2262c6f5737a34130b9458616b33d4 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Thu, 11 Jun 2026 08:16:14 +0200 Subject: [PATCH 06/11] changing tab name, config tab appearance for android and ios to check transparent/no-transparent tab bar bg, updating scenario --- .../index.tsx | 18 +++++- .../scenario.md | 59 ++++++++++--------- 2 files changed, 45 insertions(+), 32 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx index 14f01934d7..cdab8d2e74 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx @@ -85,7 +85,7 @@ function ConfigScreen() { function TabScreen() { return ( - Tab + Transparent Tab Observe the container background color behind this tab content and around the tab bar. @@ -100,14 +100,26 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [ options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Config', + ios: { + ...DEFAULT_TAB_ROUTE_OPTIONS.ios, + scrollEdgeAppearance: { + tabBarBackgroundColor: Colors.RedDark100, + }, + }, + android: { + ...DEFAULT_TAB_ROUTE_OPTIONS.android, + standardAppearance: { + tabBarBackgroundColor: Colors.RedDark100, + }, + }, }, }, { - name: 'Tab', + name: 'Transparent', Component: TabScreen, options: { ...DEFAULT_TAB_ROUTE_OPTIONS, - title: 'Tab', + title: 'Transparent', android: { ...DEFAULT_TAB_ROUTE_OPTIONS.android, standardAppearance: { diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md index 961855e84c..c09c22845c 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md @@ -25,15 +25,14 @@ manually. ## Note -- The color change applies immediately upon selecting a new value; no - restart is required. - On iOS the color fills the area behind the content screen and around - the tab bar (the full `UITabBarController` view). The tab bar itself - may partially obscure the color unless the tab bar has a transparent - or semi-transparent background. -- On Android the color fills the `FrameLayout` container, which is - visible in the gutters around the focused screen content and behind - the `BottomNavigationView`. + the tab bar (the full `UITabBarController` view). +- On Android the color fills the `FrameLayout` that wraps currently focused +screen and the `BottomNavigationView`. +- For Android and iOS < 18, the tab bar may obscure the color unless a transparent +or semi-transparent background is configured. +- On iOS 26, while the "liquid glass" tab bar partially obscures the color, it +remains inherently visible through the material. ## Steps @@ -42,8 +41,9 @@ manually. 1. Launch the app and navigate to **Native Container Style**. - [ ] The **Config** tab is active. The `backgroundColor` - picker shows `unset`. The container background is the system default - (no custom color visible). + picker shows `unset`. +- [ ] The container background is the system default (no custom color visible). +- [ ] Tab bar background is red (except iOS 26 - liquid glass). --- @@ -51,48 +51,49 @@ manually. 2. On the **Config** tab, set the `backgroundColor` picker to `blue`. -- [ ] The picker displays `blue`. The native container's background immediately changes to blue. -- [ ] **iOS 18:** The blue color is visible behind both the tab content area and the tab bar area, as tabBarBackgroundColor is transparent. -- [ ] **iOS 26:** The blue color is visible behind the tab content area and through the liquid glass tab bar. -- [ ] **Android:** The blue color is visible in the area surrounding the focused content screen. The tab bar retains the system default background color. +- [ ] The picker displays `blue`. The native container's background changes to blue. +- [ ] The blue color is visible behind the tab content area. +- [ ] The tab bar retains red color. +- [ ] **iOS 26:** The blue color is visible also through the liquid glass tab bar. -3. Tap the **Tab** tab in the tab bar. +3. Tap the **Transparent** tab in the tab bar. -- [ ] The **Tab** screen content is displayed (featuring the "Tab" label and +- [ ] The **Transparent** screen content is displayed (featuring the "Transparent Tab" label and hint text). - [ ] The container background remains blue. -- [ ] **iOS:** The appearance of the tab bar area is identical to the previous step. -- [ ] **Android:** The tab bar is transparent, making the blue background visible behind the tabs. +- [ ] The tab bar is transparent, making the blue background visible behind the tabs. +- [ ] **iOS 26:** The appearance of the tab bar area is identical to the previous step. 4. Tap the **Config** tab to switch back. - [ ] The **Config** tab is shown again. -- [ ] The `backgroundColor` picker still shows `blue`. - [ ] The blue container background persists. 5. Set the `backgroundColor` picker to `yellow`. -- [ ] The container background changes immediately to yellow. -- [ ] The blue color is no longer visible. +- [ ] The yellow color is visible behind the tab content area. +- [ ] The tab bar retains red color. +- [ ] **iOS 26:** The yellow color is visible also through the liquid glass tab bar. -6. Tap the **Tab** tab, observe the background, then return to **Config**. +6. Tap the **Transparent** tab, observe the background, then return to **Config**. -- [ ] The yellow background is visible on the **Tab** screen and remains after switching back to **Config**. -- [ ] The picker still shows `yellow`. +- [ ] The container background remains yellow. +- [ ] The tab bar is transparent, making the blue background visible behind the tabs. +- [ ] **iOS 26:** The appearance of the tab bar area is identical to the previous step. --- ### Restoring to unset -7. Set the `backgroundColor` picker back to `unset`. +7. Return to **Config** and set the `backgroundColor` picker back to `unset`. - [ ] The container background returns to the system default. -- [ ] No custom color is visible. -- [ ] The picker shows `unset`. +- [ ] The tab bar retains red color. +- [ ] **iOS 26:** The system default color is visible also through the liquid glass tab bar. -8. Tap the **Tab** tab and observe the background. +8. Tap the **Transparent** tab and observe the background. -- [ ] The **Tab** screen appears with the system-default container background. +- [ ] The **Transparent** screen appears with the system-default container background. - [ ] No color remnant from the previous `yellow` value is visible. --- From d47ab69b93e4666fe9e0ea33f785587d5f02c128 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Thu, 11 Jun 2026 08:29:26 +0200 Subject: [PATCH 07/11] adding tabBarItemActiveIndicatorEnabled: false to make android tab bar fully transparent - scenario polishing --- .../tabs/test-tabs-native-container-style/index.tsx | 2 ++ .../test-tabs-native-container-style/scenario.md | 13 +++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx index cdab8d2e74..330cad8b8f 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx @@ -110,6 +110,7 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [ ...DEFAULT_TAB_ROUTE_OPTIONS.android, standardAppearance: { tabBarBackgroundColor: Colors.RedDark100, + tabBarItemActiveIndicatorEnabled: false, }, }, }, @@ -124,6 +125,7 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [ ...DEFAULT_TAB_ROUTE_OPTIONS.android, standardAppearance: { tabBarBackgroundColor: 'transparent', + tabBarItemActiveIndicatorEnabled: false, }, }, }, diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md index c09c22845c..b6cb404c00 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md @@ -29,8 +29,8 @@ manually. the tab bar (the full `UITabBarController` view). - On Android the color fills the `FrameLayout` that wraps currently focused screen and the `BottomNavigationView`. -- For Android and iOS < 18, the tab bar may obscure the color unless a transparent -or semi-transparent background is configured. +- On Android and iOS 18 and earlier, the tab bar may obscures the color unless +a transparent or semi-transparent background is configured. - On iOS 26, while the "liquid glass" tab bar partially obscures the color, it remains inherently visible through the material. @@ -43,7 +43,8 @@ remains inherently visible through the material. - [ ] The **Config** tab is active. The `backgroundColor` picker shows `unset`. - [ ] The container background is the system default (no custom color visible). -- [ ] Tab bar background is red (except iOS 26 - liquid glass). +- [ ] Tab bar background is red. +- [ ] **iOS 26:** The system default color is visible through the liquid glass tab bar. --- @@ -54,7 +55,7 @@ remains inherently visible through the material. - [ ] The picker displays `blue`. The native container's background changes to blue. - [ ] The blue color is visible behind the tab content area. - [ ] The tab bar retains red color. -- [ ] **iOS 26:** The blue color is visible also through the liquid glass tab bar. +- [ ] **iOS 26:** The blue color is visible through the liquid glass tab bar. 3. Tap the **Transparent** tab in the tab bar. @@ -73,7 +74,7 @@ remains inherently visible through the material. - [ ] The yellow color is visible behind the tab content area. - [ ] The tab bar retains red color. -- [ ] **iOS 26:** The yellow color is visible also through the liquid glass tab bar. +- [ ] **iOS 26:** The yellow color is visible through the liquid glass tab bar. 6. Tap the **Transparent** tab, observe the background, then return to **Config**. @@ -89,7 +90,7 @@ remains inherently visible through the material. - [ ] The container background returns to the system default. - [ ] The tab bar retains red color. -- [ ] **iOS 26:** The system default color is visible also through the liquid glass tab bar. +- [ ] **iOS 26:** The system default color is visible through the liquid glass tab bar. 8. Tap the **Transparent** tab and observe the background. From 3ab15828c71f16fb23f97c0e9008527b718feb42 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Thu, 11 Jun 2026 08:45:35 +0200 Subject: [PATCH 08/11] chamging text on Transparent tab --- .../test-tabs-native-container-style/index.tsx | 16 +++++++++++----- .../scenario-description.ts | 3 ++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx index 330cad8b8f..2d25aee5cc 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx @@ -5,7 +5,13 @@ import { DEFAULT_TAB_ROUTE_OPTIONS, } from '@apps/shared/gamma/containers/tabs'; import React from 'react'; -import { View, Text, ScrollView, StyleSheet, type ColorValue } from 'react-native'; +import { + View, + Text, + ScrollView, + StyleSheet, + type ColorValue, +} from 'react-native'; import { scenarioDescription } from './scenario-description'; import { createScenario } from '@apps/tests/shared/helpers'; import { SettingsPicker } from '@apps/shared'; @@ -16,7 +22,7 @@ function ConfigScreen() { const { hostConfig, updateHostConfig } = useTabsHostConfig(); const getBackgroundColor = ( - option: ContainerBackgroundOption + option: ContainerBackgroundOption, ): ColorValue | undefined => { switch (option) { case 'blue': @@ -50,8 +56,8 @@ function ConfigScreen() { - {'•'} On Android: Color - is applied to the FrameLayout that wraps the focused screen and + {'•'} On Android: Color is + applied to the FrameLayout that wraps the focused screen and BottomNavigationView @@ -87,7 +93,7 @@ function TabScreen() { Transparent Tab - Observe the container background color behind this tab content and around the tab bar. + Observe the container background color behind the tab content and within the tab bar area. ); diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts index 683e3ed279..6cd382584b 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts @@ -3,7 +3,8 @@ import type { ScenarioDescription } from '@apps/tests/shared/helpers'; export const scenarioDescription: ScenarioDescription = { name: 'Native Container Style', key: 'test-tabs-native-container-style', - details: 'Tests the nativeContainerStyle prop with backgroundColor variations on TabsHost.', + details: + 'Tests the nativeContainerStyle prop with backgroundColor variations on TabsHost.', platforms: ['android', 'ios'], e2eCoverage: 'incomplete', smokeTest: false, From 59a2fd814550e40f3b0cad56639811ec3738c519 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Thu, 11 Jun 2026 09:14:36 +0200 Subject: [PATCH 09/11] adding standardAppearance setting for ios Config tab --- .../tabs/test-tabs-native-container-style/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx index 2d25aee5cc..364feee7c0 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx @@ -111,6 +111,9 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [ scrollEdgeAppearance: { tabBarBackgroundColor: Colors.RedDark100, }, + standardAppearance: { + tabBarBackgroundColor: Colors.RedDark100, + }, }, android: { ...DEFAULT_TAB_ROUTE_OPTIONS.android, From b9cc395f55ca4a676d722ebc3ebfd91a3f4a5634 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Thu, 11 Jun 2026 09:16:38 +0200 Subject: [PATCH 10/11] removing unused styles --- .../test-tabs-native-container-style/index.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx index 364feee7c0..32fc18c79d 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx @@ -172,20 +172,6 @@ const styles = StyleSheet.create({ color: Colors.LightOffNavy, lineHeight: 20, }, - label: { - fontSize: 13, - fontWeight: '600', - color: Colors.LightOffNavy, - marginBottom: 4, - }, - value: { - fontSize: 13, - color: Colors.OffNavy, - fontFamily: 'Menlo', - backgroundColor: Colors.OffWhite, - paddingHorizontal: 8, - paddingVertical: 4, - }, centeredContent: { flex: 1, justifyContent: 'center', From 48deb26261f9f47f1d05cc38b822e473607d85a8 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Thu, 11 Jun 2026 09:18:34 +0200 Subject: [PATCH 11/11] fixing color expectation and indentation --- .../tabs/test-tabs-native-container-style/scenario.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md index b6cb404c00..b8996ac706 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md @@ -30,9 +30,9 @@ manually. - On Android the color fills the `FrameLayout` that wraps currently focused screen and the `BottomNavigationView`. - On Android and iOS 18 and earlier, the tab bar may obscures the color unless -a transparent or semi-transparent background is configured. + a transparent or semi-transparent background is configured. - On iOS 26, while the "liquid glass" tab bar partially obscures the color, it -remains inherently visible through the material. + remains inherently visible through the material. ## Steps @@ -79,7 +79,7 @@ remains inherently visible through the material. 6. Tap the **Transparent** tab, observe the background, then return to **Config**. - [ ] The container background remains yellow. -- [ ] The tab bar is transparent, making the blue background visible behind the tabs. +- [ ] The tab bar is transparent, making the yellow background visible behind the tabs. - [ ] **iOS 26:** The appearance of the tab bar area is identical to the previous step. ---