From 3da80ad050788e11a40febf76b1ac3dd4540aca8 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 1 Jun 2026 07:16:27 +0200 Subject: [PATCH 01/13] first draft of appeaeance screen for android --- .../index.tsx | 196 ++++++++++++++++++ .../scenario-description.ts | 9 + .../scenario.md | 0 3 files changed, 205 insertions(+) create mode 100644 apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx create mode 100644 apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts create mode 100644 apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx new file mode 100644 index 0000000000..e60026fa95 --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx @@ -0,0 +1,196 @@ +import React, { useCallback, useState } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { + TabsContainer, + useTabsHostConfig, + useTabsNavigationContext, +} from '@apps/shared/gamma/containers/tabs'; +import { createScenario } from '@apps/tests/shared/helpers'; +import { scenarioDescription } from './scenario-description'; +import { Colors } from '@apps/shared/styling'; +import { DEFAULT_TAB_ROUTE_OPTIONS } from '@apps/shared/gamma/containers/tabs'; +import { SettingsPicker, SettingsSwitch } from '@apps/shared'; +import { TabsScreenAppearanceAndroid } from 'react-native-screens'; + +type LabelVisibilityMode = NonNullable; + +const LABEL_VISIBILITY_OPTIONS: LabelVisibilityMode[] = [ + 'auto', + 'selected', + 'labeled', + 'unlabeled', +]; + +function LabelTab() { + const { routeKey, setRouteOptions } = useTabsNavigationContext(); + const [labelVisibility, setLabelVisibility] = useState('auto'); + + const onLabelVisibilityChange = useCallback( + (value: LabelVisibilityMode) => { + setLabelVisibility(value); + setRouteOptions(routeKey, { + android: { + ...DEFAULT_TAB_ROUTE_OPTIONS.android, + standardAppearance: { + tabBarItemLabelVisibilityMode: value, + }, + }, + }); + }, + [routeKey, setRouteOptions], + ); + + return ( + + + Label Visibility Mode + + + Only `tabBarItemLabelVisibilityMode` is defined.{'\n'} + Tab bar renders in the system default configuration, except for labels, which follow the toggled value. + + + label="tabBarItemLabelVisibilityMode" + value={labelVisibility} + onValueChange={onLabelVisibilityChange} + items={LABEL_VISIBILITY_OPTIONS} + /> + + ); +} + +function IndicatorTab() { + const { hostConfig, updateHostConfig } = useTabsHostConfig(); + + + return ( + + + Active Indicator Enabled + + + `tabBarBackgroundColor`:{' '} + PurpleDark100 + {'\n'} + `tabBarItemActiveIndicatorColor`:{' '} + PurpleDark120 + {'\n'} + + updateHostConfig({ tabBarHidden: value })} + /> + + ); +} + +function RippleTab() { + return ( + + + Ripple Color + + + `tabBarBackgroundColor`:{' '} + NavyDark100 + {'\n'} + `tabBarItemRippleColor`:{' '} + YellowDark100 + {'\n'} + {'\n'} + `tabBarItemActiveIndicatorEnabled`: false + {'\n'} + `tabBarItemActiveIndicatorColor`:{' '} + GreenLight100 + {'\n'} + + + ); +} + +export function TabsRouteInformation() { + const navigation = useTabsNavigationContext(); + return ( + + {navigation.routeKey} + + ); +} + +export function App() { + return ( + + ); +} + +const styles = StyleSheet.create({ + screen: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + padding: 24, + gap: 12, + }, + label: { + fontSize: 17, + fontWeight: '600', + textAlign: 'center', + }, + hint: { + 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-general-apperance-android/scenario-description.ts b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts new file mode 100644 index 0000000000..10fa40a151 --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts @@ -0,0 +1,9 @@ +import type { ScenarioDescription } from '@apps/tests/shared/helpers'; + +export const scenarioDescription: ScenarioDescription = { + name: 'Tab Bar Appearance', + key: 'test-tabs-general-apperance-android', + platforms: ['android'], + e2eCoverage: 'tbd', + smokeTest: false, +}; diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md new file mode 100644 index 0000000000..e69de29bb2 From f7938022ec1d3bffce7d632326cfbbc27fdc3ca6 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 1 Jun 2026 09:19:34 +0200 Subject: [PATCH 02/13] improved scenario --- .../tests/single-feature-tests/tabs/index.ts | 4 + .../index.tsx | 149 +++++++----------- .../scenario-description.ts | 1 + .../scenario.md | 120 ++++++++++++++ 4 files changed, 186 insertions(+), 88 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index 39584ef9dc..5137aa7d57 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -18,6 +18,9 @@ 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 TestTabsGeneralApperanceAndroid from './test-tabs-general-apperance-android'; + + const scenarios = { TestTabBottomAccessory, @@ -38,6 +41,7 @@ const scenarios = { TestTabsTabBarExperimentalUserInterfaceStyle, TestTabsLifecycleEvents, TestTabsItemTitle, + TestTabsGeneralApperanceAndroid, }; const TabsScenarioGroup: ScenarioGroup = { diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx index e60026fa95..a754af1d63 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx @@ -1,8 +1,8 @@ import React, { useCallback, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { + TabRouteConfig, TabsContainer, - useTabsHostConfig, useTabsNavigationContext, } from '@apps/shared/gamma/containers/tabs'; import { createScenario } from '@apps/tests/shared/helpers'; @@ -59,34 +59,27 @@ function LabelTab() { ); } -function IndicatorTab() { - const { hostConfig, updateHostConfig } = useTabsHostConfig(); - +function RippleIndicatorTab() { + const { routeKey, setRouteOptions } = useTabsNavigationContext(); + const [activeIndicatorEnabled, setActiveIndicatorEnabled] = useState(false); - return ( - - - Active Indicator Enabled - - - `tabBarBackgroundColor`:{' '} - PurpleDark100 - {'\n'} - `tabBarItemActiveIndicatorColor`:{' '} - PurpleDark120 - {'\n'} - - updateHostConfig({ tabBarHidden: value })} - /> - + const onActiveIndicatorChange = useCallback( + (value: boolean) => { + setActiveIndicatorEnabled(value); + setRouteOptions(routeKey, { + android: { + ...DEFAULT_TAB_ROUTE_OPTIONS.android, + standardAppearance: { + tabBarBackgroundColor: Colors.PurpleDark100, + tabBarItemRippleColor: Colors.YellowDark100, + tabBarItemActiveIndicatorEnabled: value, + tabBarItemActiveIndicatorColor: Colors.GreenLight100, + }, + }, + }); + }, + [routeKey, setRouteOptions], ); -} - -function RippleTab() { return ( @@ -94,81 +87,61 @@ function RippleTab() { `tabBarBackgroundColor`:{' '} - NavyDark100 + PurpleDark100 {'\n'} `tabBarItemRippleColor`:{' '} YellowDark100 {'\n'} - {'\n'} - `tabBarItemActiveIndicatorEnabled`: false - {'\n'} + `tabBarItemActiveIndicatorColor`:{' '} GreenLight100 {'\n'} + ); } -export function TabsRouteInformation() { - const navigation = useTabsNavigationContext(); - return ( - - {navigation.routeKey} - - ); -} - -export function App() { - return ( - + }, + }, + }, +]; +export function App() { + return ( + ); } diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts index 10fa40a151..d9f984eb20 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts @@ -3,6 +3,7 @@ import type { ScenarioDescription } from '@apps/tests/shared/helpers'; export const scenarioDescription: ScenarioDescription = { name: 'Tab Bar Appearance', key: 'test-tabs-general-apperance-android', + details: 'Tests Android tab bar appearance: tabBarItemLabelVisibilityMode, tabBarBackgroundColor, tabBarItemRippleColor, tabBarItemActiveIndicatorColor, and tabBarItemActiveIndicatorEnabled', platforms: ['android'], e2eCoverage: 'tbd', smokeTest: false, diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md index e69de29bb2..c27b1a9083 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md @@ -0,0 +1,120 @@ +# Test Scenario: Tab Bar Appearance (Android) + +## Details + +**Description:** Verifies tab bar appearance props for Android. The test +covers two independent appearance axes: + +1. **Label visibility** - `tabBarItemLabelVisibilityMode` controls whether + tab labels are shown always (`labeled`), never (`unlabeled`), only for + the selected tab (`selected`), or follow the system default (`auto`). +2. **Colors and active indicator** — `tabBarBackgroundColor`, + `tabBarItemRippleColor`, `tabBarItemActiveIndicatorColor`, and + `tabBarItemActiveIndicatorEnabled` together control the background + tint, touch-ripple color, and the pill-shaped indicator drawn behind + the active tab icon. + +**OS test creation version:** Android: API Level 36. + +## E2E test + +Incomplete: Not automated. Detox does not have access to color or visibility attributes on +Android views, so it is not possible to programmatically assert whether +a label is hidden or a specific color value has been applied. + +## Prerequisites + +- Android emulator or physical device. + +## Note + +- This scenario is **Android-only**. The props under test are configured only for Android. +- The two tabs ("Label" and "Ripple") are independent; changes on one + tab do not affect the other. +- The active indicator toggle on the Ripple tab starts in the **off** + (disabled) state on every fresh launch. + +## Steps + +### Baseline + +1. Launch the app and navigate to the **Tab Bar Appearance** screen. + +- [ ] Two tabs are shown — "Label" (selected by default) and + "Custom". The Label tab content is visible. The + `tabBarItemLabelVisibilityMode` picker shows `auto`. + +--- + +### Label tab — tabBarItemLabelVisibilityMode + +2. Verify the initial state of the Label tab with + `tabBarItemLabelVisibilityMode = auto`. + +- [ ] Tab bar renders in the system default configuration. + Both tab labels ("Label" and "Custom") are visible. + +3. Select `selected` in the picker. + +- [ ] Only the currently selected tab shows its label. The "Custom" label + is hidden. + +4. In the `tabBarItemLabelVisibilityMode` picker, select `labeled`. + +- [ ] Labels for all tabs are always shown regardless of + selection state. + +5. Select `unlabeled` in the picker. + +- [ ] Labels for all tabs are hidden; only icons are shown. + +6. Select `auto` in the picker. + +- [ ] Tab bar returns to the system default label rendering. + +7. Cycle through all four values (`auto` → `selected` → `labeled` → + `unlabeled`) in quick succession. + +- [ ] The tab bar updates immediately after each change with + no crash or layout freeze. At the end labels for all tabs are hidden. + +--- + +### Custom tab — colors and active indicator + +8. Tap the **Custom** tab. + +- [ ] The Custom tab content is visible. The tab bar + background changes to PurpleDark100. The + `tabBarItemActiveIndicatorEnabled` switch is off. + +9. Tap the "Label" tab and then tap the "Custom" tab again to + observe the touch-ripple color. + +- [ ] Tab titles are hidden when selecting the "Label" tab. +- [ ] A ripple effect in YellowDark100 is visible on the tapped tab item as an +unconstrained yellow circle that expands and smoothly fades outward. + +10. Enable the `tabBarItemActiveIndicatorEnabled` switch. + +- [ ] A pill-shaped active indicator in GreenLight100 +appears behind the Custom tab's icon in the tab bar. + +11. Tap the **Label** tab, then tap the **Custom** tab again to + observe the touch-ripple color. + +- [ ] The tabs title are hidden when Label tab is selected. +- [ ] The ripple effect in YellowDark100 is visible on the tapped tab item, +contained inside the pill-shaped active indicator frame. +After the ripple animation ends, the indicator color remains GreenLight100. + +12. Disable the `tabBarItemActiveIndicatorEnabled` switch. + +- [ ] The active indicator is no longer visible. + Tab bar background and ripple colors remain unchanged. + +13. Toggle the `tabBarItemActiveIndicatorEnabled` switch on and off + few times in quick succession. + +- [ ] The indicator appears and disappears correctly with + each toggle. No crash or visual artifact occurs. From c10b4f8d6c739672a4957dc33b82eea2e4f4984e Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 1 Jun 2026 10:26:45 +0200 Subject: [PATCH 03/13] chore(test): test-tabs-general-appearance-android --- .../tests/single-feature-tests/tabs/index.ts | 4 +- .../index.tsx | 113 +++++++++---- .../scenario-description.ts | 4 +- .../scenario.md | 150 ++++++++++-------- 4 files changed, 167 insertions(+), 104 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index 5137aa7d57..e36b2f648e 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -18,7 +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 TestTabsGeneralApperanceAndroid from './test-tabs-general-apperance-android'; +import TestTabsGeneralApperance from './test-tabs-general-apperance-android'; @@ -41,7 +41,7 @@ const scenarios = { TestTabsTabBarExperimentalUserInterfaceStyle, TestTabsLifecycleEvents, TestTabsItemTitle, - TestTabsGeneralApperanceAndroid, + TestTabsGeneralApperance, }; const TabsScenarioGroup: ScenarioGroup = { diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx index a754af1d63..916cd3e4f6 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx @@ -21,6 +21,19 @@ const LABEL_VISIBILITY_OPTIONS: LabelVisibilityMode[] = [ 'unlabeled', ]; +function DefaultTab() { + return ( + + + Default configuration + + + Tab bar renders in the system default configuration. + + + ); +} + function LabelTab() { const { routeKey, setRouteOptions } = useTabsNavigationContext(); const [labelVisibility, setLabelVisibility] = useState('auto'); @@ -47,7 +60,7 @@ function LabelTab() { Only `tabBarItemLabelVisibilityMode` is defined.{'\n'} - Tab bar renders in the system default configuration, except for labels, which follow the toggled value. + Labels follow the toggled value. label="tabBarItemLabelVisibilityMode" @@ -59,51 +72,52 @@ function LabelTab() { ); } -function RippleIndicatorTab() { - const { routeKey, setRouteOptions } = useTabsNavigationContext(); - const [activeIndicatorEnabled, setActiveIndicatorEnabled] = useState(false); - - const onActiveIndicatorChange = useCallback( - (value: boolean) => { - setActiveIndicatorEnabled(value); - setRouteOptions(routeKey, { - android: { - ...DEFAULT_TAB_ROUTE_OPTIONS.android, - standardAppearance: { - tabBarBackgroundColor: Colors.PurpleDark100, - tabBarItemRippleColor: Colors.YellowDark100, - tabBarItemActiveIndicatorEnabled: value, - tabBarItemActiveIndicatorColor: Colors.GreenLight100, - }, - }, - }); - }, - [routeKey, setRouteOptions], +function RippleTab() { + return ( + + + Ripple Effect + + + `tabBarItemLabelVisibilityMode`: 'selected' + {'\n'} + `tabBarBackgroundColor`:{' '} + NavyDark100 + {'\n'} + `tabBarItemRippleColor`:{' '} + YellowDark100 + {'\n'} + `tabBarItemActiveIndicatorEnabled`: `false` + {'\n'} + `tabBarItemActiveIndicatorColor`:{' '} + GreenLight100 + {'\n'} + + ); +} + +function IndicatorTab() { return ( - Ripple Color + Active Indicator Enabled + `tabBarItemLabelVisibilityMode`: 'selected' + {'\n'} `tabBarBackgroundColor`:{' '} PurpleDark100 {'\n'} `tabBarItemRippleColor`:{' '} YellowDark100 {'\n'} - + `tabBarItemActiveIndicatorEnabled`: `true` + {'\n'} `tabBarItemActiveIndicatorColor`:{' '} GreenLight100 {'\n'} - ); } @@ -111,6 +125,16 @@ function RippleIndicatorTab() { const ROUTE_CONFIGS: TabRouteConfig[] = [ { name: 'Default', + Component: DefaultTab, + options: { + title: 'Default', + android: { + ...DEFAULT_TAB_ROUTE_OPTIONS.android, + }, + }, + }, + { + name: 'Label', Component: LabelTab, options: { title: 'Label', @@ -123,17 +147,36 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [ }, }, { - name: 'Custom', - Component: RippleIndicatorTab, + name: 'Ripple', + Component: RippleTab, options: { - title: 'Custom', + title: 'Ripple', android: { ...DEFAULT_TAB_ROUTE_OPTIONS.android, standardAppearance: { - tabBarBackgroundColor: Colors.PurpleDark100, + tabBarBackgroundColor: Colors.NavyDark100, tabBarItemRippleColor: Colors.YellowDark100, tabBarItemActiveIndicatorEnabled: false, tabBarItemActiveIndicatorColor: Colors.GreenLight100, + tabBarItemLabelVisibilityMode: 'labeled', + + }, + }, + }, + }, + { + name: 'Indicator', + Component: IndicatorTab, + options: { + title: 'Indicator', + android: { + ...DEFAULT_TAB_ROUTE_OPTIONS.android, + standardAppearance: { + tabBarBackgroundColor: Colors.PurpleDark100, + tabBarItemRippleColor: Colors.YellowDark100, + tabBarItemActiveIndicatorEnabled: true, + tabBarItemActiveIndicatorColor: Colors.GreenLight100, + tabBarItemLabelVisibilityMode: 'labeled', }, }, }, @@ -141,7 +184,7 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [ ]; export function App() { return ( - + ); } diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts index d9f984eb20..fb24555e7f 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts @@ -3,8 +3,8 @@ import type { ScenarioDescription } from '@apps/tests/shared/helpers'; export const scenarioDescription: ScenarioDescription = { name: 'Tab Bar Appearance', key: 'test-tabs-general-apperance-android', - details: 'Tests Android tab bar appearance: tabBarItemLabelVisibilityMode, tabBarBackgroundColor, tabBarItemRippleColor, tabBarItemActiveIndicatorColor, and tabBarItemActiveIndicatorEnabled', + details: 'Tests Android tab bar appearance: default system rendering, label visibility, ripple effect, and active indicator.', platforms: ['android'], - e2eCoverage: 'tbd', + e2eCoverage: 'incomplete', smokeTest: false, }; diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md index c27b1a9083..ed37e9817f 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md @@ -2,24 +2,17 @@ ## Details -**Description:** Verifies tab bar appearance props for Android. The test -covers two independent appearance axes: - -1. **Label visibility** - `tabBarItemLabelVisibilityMode` controls whether - tab labels are shown always (`labeled`), never (`unlabeled`), only for - the selected tab (`selected`), or follow the system default (`auto`). -2. **Colors and active indicator** — `tabBarBackgroundColor`, - `tabBarItemRippleColor`, `tabBarItemActiveIndicatorColor`, and - `tabBarItemActiveIndicatorEnabled` together control the background - tint, touch-ripple color, and the pill-shaped indicator drawn behind - the active tab icon. +**Description:** Verifies Android tab bar appearance behaviors, +specifically checking native system defaults, dynamic text label visibility rules, +and the interaction between the touch-ripple animation and the persistent active +indicator shape. **OS test creation version:** Android: API Level 36. ## E2E test -Incomplete: Not automated. Detox does not have access to color or visibility attributes on -Android views, so it is not possible to programmatically assert whether +Incomplete: Not automated. Detox does not have access to color or visibility +attributes on Android views, so it is not possible to programmatically assert whether a label is hidden or a specific color value has been applied. ## Prerequisites @@ -28,93 +21,120 @@ a label is hidden or a specific color value has been applied. ## Note -- This scenario is **Android-only**. The props under test are configured only for Android. -- The two tabs ("Label" and "Ripple") are independent; changes on one - tab do not affect the other. -- The active indicator toggle on the Ripple tab starts in the **off** - (disabled) state on every fresh launch. +- This scenario is **Android-only**. All props under test are configured + only for the Android platform. +- The four tabs (Default, Label, Ripple, Indicator) are independent; + changes on one tab do not affect the others. +- The Label tab picker resets to `auto` on every fresh launch. +- The Ripple and Indicator tabs are static — they have no interactive + controls. Verification is purely visual. +- The ripple (`tabBarItemRippleColor`) is a **transient** touch-feedback + color seen only while pressing or holding a tab item. It is distinct + from the active indicator (`tabBarItemActiveIndicatorColor`), which + is a **persistent** pill visible behind the selected tab icon. ## Steps -### Baseline +### Default tab 1. Launch the app and navigate to the **Tab Bar Appearance** screen. -- [ ] Two tabs are shown — "Label" (selected by default) and - "Custom". The Label tab content is visible. The - `tabBarItemLabelVisibilityMode` picker shows `auto`. +- [ ] The **Default** tab is selected and its content ("Default configuration") +is visible. +- [ ] Four tabs are shown in the tab bar - selected tab has visible +title ("Default"), for other tabs only icons are shown in the tab bar. +- [ ] The tab bar renders in the system default colors with no appearance +overrides applied. --- ### Label tab — tabBarItemLabelVisibilityMode -2. Verify the initial state of the Label tab with - `tabBarItemLabelVisibilityMode = auto`. +2. Tap the second tab from the left side. -- [ ] Tab bar renders in the system default configuration. - Both tab labels ("Label" and "Custom") are visible. +- [ ] The Label tab content ("Label Visibility Mode") is visible. +- [ ] The `tabBarItemLabelVisibilityMode` picker shows `auto`. +- [ ] Tab bar renders labels using the system default behavior - only selected +tab title is visible. -3. Select `selected` in the picker. +3. In the picker, select `labeled`. -- [ ] Only the currently selected tab shows its label. The "Custom" label - is hidden. +- [ ] Labels for all four tabs are shown. -4. In the `tabBarItemLabelVisibilityMode` picker, select `labeled`. +4. Tap a **Default** tab and observe the tab bar. -- [ ] Labels for all tabs are always shown regardless of - selection state. +- [ ] "Default" becomes selected and its label is now + shown. The label for other tabs are no longer visible. -5. Select `unlabeled` in the picker. +5. Tap the second tab again. -- [ ] Labels for all tabs are hidden; only icons are shown. +- [ ] "Label" tab is selected, label for all tabs reappears. -6. Select `auto` in the picker. +6. In the picker, select `selected`. -- [ ] Tab bar returns to the system default label rendering. +- [ ] Only the currently selected tab ("Label") shows + its label. Labels for the other three tabs are hidden. -7. Cycle through all four values (`auto` → `selected` → `labeled` → - `unlabeled`) in quick succession. +7. In the picker, select `unlabeled`. -- [ ] The tab bar updates immediately after each change with - no crash or layout freeze. At the end labels for all tabs are hidden. +- [ ] Labels for all four tabs are hidden; only icons + are shown in the tab bar. + +8. Cycle through all four values (`auto` → `selected` → `labeled` + → `unlabeled`) in quick succession. + +- [ ] The tab bar updates immediately after each change with no crash or layout freeze. +- [ ] At the end, labels for all tabs are hidden (unlabeled). --- -### Custom tab — colors and active indicator +### Ripple tab — transient ripple color (indicator disabled) + +9. Tap the **Ripple** tab (third from left). + +- [ ] The Ripple tab content ("Ripple Effect") is visible. +- [ ] The tab bar background changes to dark navy. +- [ ] Labels are shown for all tabs. +- [ ] No persistent indicator pill is visible behind tab icon. -8. Tap the **Custom** tab. +10. Press and hold the **Default** tab item in the tab bar for + approximately one second, then release. -- [ ] The Custom tab content is visible. The tab bar - background changes to PurpleDark100. The - `tabBarItemActiveIndicatorEnabled` switch is off. +- [ ] While pressing, a transient ripple expands from + the touch point in yellow. +- [ ] The ripple fades and disappears after release. -9. Tap the "Label" tab and then tap the "Custom" tab again to - observe the touch-ripple color. +11. Tap the **Label** tab, then the **Ripple** tab. -- [ ] Tab titles are hidden when selecting the "Label" tab. -- [ ] A ripple effect in YellowDark100 is visible on the tapped tab item as an +- [ ] When Label tab is selected, labels for all tabs are hidden. +- [ ] While selecting Ripple tab, a ripple effect is visible as an unconstrained yellow circle that expands and smoothly fades outward. -10. Enable the `tabBarItemActiveIndicatorEnabled` switch. +--- + +### Indicator tab — persistent active indicator + ripple + +12. Tap the **Indicator** tab. -- [ ] A pill-shaped active indicator in GreenLight100 -appears behind the Custom tab's icon in the tab bar. +- [ ] The Indicator tab content ("Active Indicator Enabled") is visible. +- [ ] The tab bar background changes to purple. +- [ ] Labels are shown for all tabs. +- [ ] A persistent green pill-shaped indicator is visible behind the "Indicator" +tab icon in the tab bar. -11. Tap the **Label** tab, then tap the **Custom** tab again to - observe the touch-ripple color. +13. Tap the **Default** tab, then the **Indicator** tab. -- [ ] The tabs title are hidden when Label tab is selected. -- [ ] The ripple effect in YellowDark100 is visible on the tapped tab item, -contained inside the pill-shaped active indicator frame. -After the ripple animation ends, the indicator color remains GreenLight100. +- [ ] The yellow ripple effect is visible on the Indicator tab item, +contained within the pill-shaped active indicator frame. +- [ ] After the ripple animation ends, the indicator color remains green. -12. Disable the `tabBarItemActiveIndicatorEnabled` switch. +14. Tap the **Indicator** tab. Then press and hold the **Default** + tab item for approximately one second, then release. -- [ ] The active indicator is no longer visible. - Tab bar background and ripple colors remain unchanged. +- [ ] While pressing, a transient yellow ripple is visible. +- [ ] The ripple is contained within the pill-shaped indicator frame. -13. Toggle the `tabBarItemActiveIndicatorEnabled` switch on and off - few times in quick succession. +15. Rapidly tap between **Default**, **Label**, and **Ripple** tabs + several times. -- [ ] The indicator appears and disappears correctly with - each toggle. No crash or visual artifact occurs. +- [ ] Per-tab tab bar custom appearance configurations are applied correctly while switching tabs. From fb29c2d85cdcb144454234bd93d0d3d51cadf833 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 1 Jun 2026 10:41:35 +0200 Subject: [PATCH 04/13] changing typo in name appearance --- apps/src/tests/single-feature-tests/tabs/index.ts | 2 +- .../index.tsx | 0 .../scenario-description.ts | 2 +- .../scenario.md | 0 4 files changed, 2 insertions(+), 2 deletions(-) rename apps/src/tests/single-feature-tests/tabs/{test-tabs-general-apperance-android => test-tabs-general-appearance-android}/index.tsx (100%) rename apps/src/tests/single-feature-tests/tabs/{test-tabs-general-apperance-android => test-tabs-general-appearance-android}/scenario-description.ts (88%) rename apps/src/tests/single-feature-tests/tabs/{test-tabs-general-apperance-android => test-tabs-general-appearance-android}/scenario.md (100%) diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index e36b2f648e..3d1c30d5bf 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -18,7 +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 TestTabsGeneralApperance from './test-tabs-general-apperance-android'; +import TestTabsGeneralApperance from './test-tabs-general-appearance-android'; diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx similarity index 100% rename from apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/index.tsx rename to apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario-description.ts similarity index 88% rename from apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts rename to apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario-description.ts index fb24555e7f..65d09ab024 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario-description.ts +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario-description.ts @@ -2,7 +2,7 @@ import type { ScenarioDescription } from '@apps/tests/shared/helpers'; export const scenarioDescription: ScenarioDescription = { name: 'Tab Bar Appearance', - key: 'test-tabs-general-apperance-android', + key: 'test-tabs-general-appearance-android', details: 'Tests Android tab bar appearance: default system rendering, label visibility, ripple effect, and active indicator.', platforms: ['android'], e2eCoverage: 'incomplete', diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md similarity index 100% rename from apps/src/tests/single-feature-tests/tabs/test-tabs-general-apperance-android/scenario.md rename to apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md From 77eaefde1706ac364034a60fb83de3636f1fc13c Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 1 Jun 2026 10:43:32 +0200 Subject: [PATCH 05/13] changing typo in name appearance --- apps/src/tests/single-feature-tests/tabs/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index 3d1c30d5bf..45000dc471 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -18,7 +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 TestTabsGeneralApperance from './test-tabs-general-appearance-android'; +import TestTabsGeneralAppearance from './test-tabs-general-appearance-android'; @@ -41,7 +41,7 @@ const scenarios = { TestTabsTabBarExperimentalUserInterfaceStyle, TestTabsLifecycleEvents, TestTabsItemTitle, - TestTabsGeneralApperance, + TestTabsGeneralAppearance, }; const TabsScenarioGroup: ScenarioGroup = { From 2aa688ed22b9adbde24f3f99b5867ac6ef24575a Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 1 Jun 2026 10:45:09 +0200 Subject: [PATCH 06/13] changing typo in name appearance --- .../tabs/test-tabs-general-appearance-android/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx index 916cd3e4f6..68b1146dc5 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx @@ -9,7 +9,7 @@ import { createScenario } from '@apps/tests/shared/helpers'; import { scenarioDescription } from './scenario-description'; import { Colors } from '@apps/shared/styling'; import { DEFAULT_TAB_ROUTE_OPTIONS } from '@apps/shared/gamma/containers/tabs'; -import { SettingsPicker, SettingsSwitch } from '@apps/shared'; +import { SettingsPicker } from '@apps/shared'; import { TabsScreenAppearanceAndroid } from 'react-native-screens'; type LabelVisibilityMode = NonNullable; From ace6591f33b99650df9b2f7656be8341d8f20cbe Mon Sep 17 00:00:00 2001 From: lkuchno Date: Tue, 2 Jun 2026 10:24:36 +0200 Subject: [PATCH 07/13] applying remarks from review --- .../tabs/test-tabs-general-appearance-android/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx index 68b1146dc5..da5d3d2a59 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { - TabRouteConfig, + type TabRouteConfig, TabsContainer, useTabsNavigationContext, } from '@apps/shared/gamma/containers/tabs'; @@ -79,7 +79,7 @@ function RippleTab() { Ripple Effect - `tabBarItemLabelVisibilityMode`: 'selected' + `tabBarItemLabelVisibilityMode`: 'labeled' {'\n'} `tabBarBackgroundColor`:{' '} NavyDark100 @@ -104,7 +104,7 @@ function IndicatorTab() { Active Indicator Enabled - `tabBarItemLabelVisibilityMode`: 'selected' + `tabBarItemLabelVisibilityMode`: 'labeled' {'\n'} `tabBarBackgroundColor`:{' '} PurpleDark100 @@ -159,7 +159,6 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [ tabBarItemActiveIndicatorEnabled: false, tabBarItemActiveIndicatorColor: Colors.GreenLight100, tabBarItemLabelVisibilityMode: 'labeled', - }, }, }, From 38e3ed506609a89f690a2ea18ec52b24d662bea3 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Tue, 2 Jun 2026 10:33:44 +0200 Subject: [PATCH 08/13] changign label to labels as it refers to plural --- .../tabs/test-tabs-general-appearance-android/scenario.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md index ed37e9817f..78aecc6333 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md @@ -64,7 +64,7 @@ tab title is visible. 4. Tap a **Default** tab and observe the tab bar. - [ ] "Default" becomes selected and its label is now - shown. The label for other tabs are no longer visible. + shown. The labels for other tabs are no longer visible. 5. Tap the second tab again. From c64210ab54c7034897ec2e762aa1702091db3e24 Mon Sep 17 00:00:00 2001 From: lkuchno Date: Tue, 2 Jun 2026 10:35:40 +0200 Subject: [PATCH 09/13] changing name from Tab Bar Appearance to Tab Bar General Appearance --- .../scenario-description.ts | 2 +- .../tabs/test-tabs-general-appearance-android/scenario.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario-description.ts b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario-description.ts index 65d09ab024..273c564de8 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario-description.ts +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario-description.ts @@ -1,7 +1,7 @@ import type { ScenarioDescription } from '@apps/tests/shared/helpers'; export const scenarioDescription: ScenarioDescription = { - name: 'Tab Bar Appearance', + name: 'Tab Bar General Appearance', key: 'test-tabs-general-appearance-android', details: 'Tests Android tab bar appearance: default system rendering, label visibility, ripple effect, and active indicator.', platforms: ['android'], diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md index 78aecc6333..47c76fdce7 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md @@ -37,7 +37,7 @@ a label is hidden or a specific color value has been applied. ### Default tab -1. Launch the app and navigate to the **Tab Bar Appearance** screen. +1. Launch the app and navigate to the **Tab Bar General Appearance** screen. - [ ] The **Default** tab is selected and its content ("Default configuration") is visible. From a3d0f5b59dfd1490fdd3e27a61bb5591182c7e9c Mon Sep 17 00:00:00 2001 From: lkuchno Date: Tue, 2 Jun 2026 10:37:04 +0200 Subject: [PATCH 10/13] reordering imports --- .../tabs/test-tabs-general-appearance-android/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx index da5d3d2a59..d293e9ea45 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx @@ -1,9 +1,9 @@ import React, { useCallback, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { - type TabRouteConfig, TabsContainer, useTabsNavigationContext, + type TabRouteConfig, } from '@apps/shared/gamma/containers/tabs'; import { createScenario } from '@apps/tests/shared/helpers'; import { scenarioDescription } from './scenario-description'; From 67b0330774fb3cb458c82f5b5919e0027fef314e Mon Sep 17 00:00:00 2001 From: lkuchno Date: Tue, 2 Jun 2026 10:43:19 +0200 Subject: [PATCH 11/13] changing test scenario title to Tab Bar General Appearance (Android) --- .../tabs/test-tabs-general-appearance-android/scenario.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md index 47c76fdce7..439f9d580f 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md @@ -1,4 +1,4 @@ -# Test Scenario: Tab Bar Appearance (Android) +# Test Scenario: Tab Bar General Appearance (Android) ## Details From 1c4f090b18da58186524d5e2a7b6b3830c0a4a6e Mon Sep 17 00:00:00 2001 From: lkuchno Date: Tue, 2 Jun 2026 10:44:36 +0200 Subject: [PATCH 12/13] removing spaces --- apps/src/tests/single-feature-tests/tabs/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index 45000dc471..d18e61ef11 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -20,8 +20,6 @@ import TestTabsLifecycleEvents from './test-tabs-lifecycle-events'; import TestTabsItemTitle from './test-tabs-item-title-ios'; import TestTabsGeneralAppearance from './test-tabs-general-appearance-android'; - - const scenarios = { TestTabBottomAccessory, TestTabsOverrideScrollViewContentInset, From d9c8901a9743ecb9dbbe33bd914aa3fc6f638bca Mon Sep 17 00:00:00 2001 From: lkuchno Date: Mon, 8 Jun 2026 10:11:10 +0200 Subject: [PATCH 13/13] formatting and duplicated import fix --- .../index.tsx | 45 +++++++------------ 1 file changed, 15 insertions(+), 30 deletions(-) diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx index d293e9ea45..d655393eca 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx @@ -3,14 +3,14 @@ import { StyleSheet, Text, View } from 'react-native'; import { TabsContainer, useTabsNavigationContext, + DEFAULT_TAB_ROUTE_OPTIONS, type TabRouteConfig, } from '@apps/shared/gamma/containers/tabs'; import { createScenario } from '@apps/tests/shared/helpers'; import { scenarioDescription } from './scenario-description'; import { Colors } from '@apps/shared/styling'; -import { DEFAULT_TAB_ROUTE_OPTIONS } from '@apps/shared/gamma/containers/tabs'; import { SettingsPicker } from '@apps/shared'; -import { TabsScreenAppearanceAndroid } from 'react-native-screens'; +import type { TabsScreenAppearanceAndroid } from 'react-native-screens'; type LabelVisibilityMode = NonNullable; @@ -24,12 +24,8 @@ const LABEL_VISIBILITY_OPTIONS: LabelVisibilityMode[] = [ function DefaultTab() { return ( - - Default configuration - - - Tab bar renders in the system default configuration. - + Default configuration + Tab bar renders in the system default configuration. ); } @@ -58,10 +54,7 @@ function LabelTab() { Label Visibility Mode - - Only `tabBarItemLabelVisibilityMode` is defined.{'\n'} - Labels follow the toggled value. - + Only `tabBarItemLabelVisibilityMode` is defined.{'\n'} Labels follow the toggled value. label="tabBarItemLabelVisibilityMode" value={labelVisibility} @@ -80,16 +73,12 @@ function RippleTab() { `tabBarItemLabelVisibilityMode`: 'labeled' - {'\n'} - `tabBarBackgroundColor`:{' '} + {'\n'}`tabBarBackgroundColor`:{' '} NavyDark100 - {'\n'} - `tabBarItemRippleColor`:{' '} + {'\n'}`tabBarItemRippleColor`:{' '} YellowDark100 - {'\n'} - `tabBarItemActiveIndicatorEnabled`: `false` - {'\n'} - `tabBarItemActiveIndicatorColor`:{' '} + {'\n'}`tabBarItemActiveIndicatorEnabled`: `false` + {'\n'}`tabBarItemActiveIndicatorColor`:{' '} GreenLight100 {'\n'} @@ -103,18 +92,13 @@ function IndicatorTab() { Active Indicator Enabled - - `tabBarItemLabelVisibilityMode`: 'labeled' - {'\n'} - `tabBarBackgroundColor`:{' '} + `tabBarItemLabelVisibilityMode`: 'labeled' + {'\n'}`tabBarBackgroundColor`:{' '} PurpleDark100 - {'\n'} - `tabBarItemRippleColor`:{' '} + {'\n'}`tabBarItemRippleColor`:{' '} YellowDark100 - {'\n'} - `tabBarItemActiveIndicatorEnabled`: `true` - {'\n'} - `tabBarItemActiveIndicatorColor`:{' '} + {'\n'}`tabBarItemActiveIndicatorEnabled`: `true` + {'\n'}`tabBarItemActiveIndicatorColor`:{' '} GreenLight100 {'\n'} @@ -181,6 +165,7 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [ }, }, ]; + export function App() { return (