Skip to content

Commit 2f6db3d

Browse files
LKuchnoclaude
authored and
sgaczol
committed
refactor(test): test-tabs-appearance-defined-by-selected-tab (#4179)
## Summary Refactors the single-feature test screen and adds scenario for **`test-tabs-appearance-defined-by-selected-tab`**, which verifies that the native tab bar dynamically updates to reflect the appearance/styling defined by the currently selected tab. The screen exercises per-tab tab bar appearance across iOS and Android: tab bar background, icon and title colors for normal/selected/focused states, active indicator, badge text/background colors, and title font options. Each of three tabs defines a distinct appearance so switching tabs (via the native bar or in-screen buttons) is visibly reflected in the bar. Closes: software-mansion/react-native-screens-labs#1533 ## Changelog - **`.../test-tabs-appearance-defined-by-selected-tab/index.tsx`** — refactored test screen; per-tab appearance configs derived from shared `DEFAULT_APPEARANCE_IOS` / `DEFAULT_APPEARANCE_ANDROID` defaults with per-tab overrides; added `badgeValue` on Tab3. - **`.../test-tabs-appearance-defined-by-selected-tab/scenario.md`** — new manual test scenario with iOS/Android steps and expected per-tab color results, including badge value notes. - **`.../test-tabs-appearance-defined-by-selected-tab/scenario-description.ts`** — added `details` field and set name to "Tab-Specific Appearance". ## Test visual documentation |Android API lvl 36| iOS 18.6 | iOS 26.5| |---|---|---| | <video src="https://github.com/user-attachments/assets/63d7e2be-21dd-4c35-bbb2-72f7f15e02f2" />| <video src="https://github.com/user-attachments/assets/706fa7ec-f601-495b-a478-0b814b5e790b"/> | <video src="https://github.com/user-attachments/assets/9f43805b-7eeb-4590-a12e-9302c3e7705d"/> | --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 5e2be05 commit 2f6db3d

3 files changed

Lines changed: 246 additions & 83 deletions

File tree

‎apps/src/tests/single-feature-tests/tabs/test-tabs-appearance-defined-by-selected-tab/index.tsx‎

Lines changed: 47 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,8 @@ const DEFAULT_APPEARANCE_ANDROID: TabsScreenAppearanceAndroid = {
3131
},
3232
tabBarItemActiveIndicatorEnabled: true,
3333
tabBarItemActiveIndicatorColor: Colors.GreenLight40,
34-
tabBarItemTitleSmallLabelFontSize: 10,
35-
tabBarItemTitleLargeLabelFontSize: 16,
36-
tabBarItemTitleFontFamily: 'monospace',
37-
tabBarItemTitleFontStyle: 'italic',
38-
tabBarItemTitleFontWeight: 700,
39-
tabBarItemBadgeTextColor: Colors.RedDark120,
40-
tabBarItemBadgeBackgroundColor: Colors.RedDark40,
34+
tabBarItemBadgeTextColor: Colors.White,
35+
tabBarItemBadgeBackgroundColor: Colors.GreenDark100,
4136
};
4237

4338
const DEFAULT_APPEARANCE_IOS: TabsScreenAppearanceIOS = {
@@ -47,20 +42,45 @@ const DEFAULT_APPEARANCE_IOS: TabsScreenAppearanceIOS = {
4742
normal: {
4843
tabBarItemIconColor: Colors.BlueLight100,
4944
tabBarItemTitleFontColor: Colors.BlueLight40,
50-
tabBarItemTitleFontSize: 12,
51-
tabBarItemTitleFontFamily: 'Courier',
52-
tabBarItemTitleFontStyle: 'italic',
53-
tabBarItemTitleFontWeight: '700',
54-
tabBarItemBadgeBackgroundColor: Colors.RedDark40,
45+
tabBarItemBadgeBackgroundColor: Colors.GreenDark100,
5546
},
5647
selected: {
5748
tabBarItemIconColor: Colors.GreenLight100,
5849
tabBarItemTitleFontColor: Colors.GreenLight40,
5950
},
60-
focused: {
51+
},
52+
};
53+
54+
const TAB2_APPEARANCE_IOS: TabsScreenAppearanceIOS = {
55+
...DEFAULT_APPEARANCE_IOS,
56+
tabBarBackgroundColor: Colors.PurpleDark100,
57+
stacked: {
58+
...DEFAULT_APPEARANCE_IOS.stacked,
59+
normal: {
60+
...DEFAULT_APPEARANCE_IOS.stacked?.normal,
6161
tabBarItemIconColor: Colors.YellowDark100,
6262
tabBarItemTitleFontColor: Colors.YellowDark40,
6363
},
64+
selected: {
65+
...DEFAULT_APPEARANCE_IOS.stacked?.selected,
66+
tabBarItemIconColor: Colors.RedDark100,
67+
tabBarItemTitleFontColor: Colors.RedDark80,
68+
tabBarItemTitleFontStyle: 'italic',
69+
tabBarItemTitleFontSize: 16,
70+
tabBarItemTitleFontFamily: 'Courier',
71+
tabBarItemTitleFontWeight: '700',
72+
},
73+
},
74+
};
75+
76+
const TAB3_APPEARANCE_IOS: TabsScreenAppearanceIOS = {
77+
...DEFAULT_APPEARANCE_IOS,
78+
stacked: {
79+
...DEFAULT_APPEARANCE_IOS.stacked,
80+
normal: {
81+
...DEFAULT_APPEARANCE_IOS.stacked?.normal,
82+
tabBarItemBadgeBackgroundColor: Colors.RedDark100,
83+
},
6484
},
6585
};
6686

@@ -139,50 +159,8 @@ function TestTabsAppearanceDefinedBySelectedTab() {
139159
type: 'templateSource',
140160
templateSource: require('@assets/variableIcons/icon.png'),
141161
},
142-
standardAppearance: {
143-
...DEFAULT_APPEARANCE_IOS,
144-
tabBarBackgroundColor: Colors.PurpleDark100,
145-
stacked: {
146-
...DEFAULT_APPEARANCE_IOS.stacked,
147-
normal: {
148-
...DEFAULT_APPEARANCE_IOS.stacked?.normal,
149-
tabBarItemIconColor: Colors.YellowDark100,
150-
tabBarItemTitleFontColor: Colors.YellowDark40,
151-
},
152-
selected: {
153-
...DEFAULT_APPEARANCE_IOS.stacked?.selected,
154-
tabBarItemIconColor: Colors.RedDark100,
155-
tabBarItemTitleFontColor: Colors.RedDark40,
156-
},
157-
focused: {
158-
...DEFAULT_APPEARANCE_IOS.stacked?.focused,
159-
tabBarItemIconColor: Colors.RedLight100,
160-
tabBarItemTitleFontColor: Colors.RedLight40,
161-
},
162-
},
163-
},
164-
scrollEdgeAppearance: {
165-
...DEFAULT_APPEARANCE_IOS,
166-
tabBarBackgroundColor: Colors.PurpleDark100,
167-
stacked: {
168-
...DEFAULT_APPEARANCE_IOS.stacked,
169-
normal: {
170-
...DEFAULT_APPEARANCE_IOS.stacked?.normal,
171-
tabBarItemIconColor: Colors.YellowDark100,
172-
tabBarItemTitleFontColor: Colors.YellowDark40,
173-
},
174-
selected: {
175-
...DEFAULT_APPEARANCE_IOS.stacked?.selected,
176-
tabBarItemIconColor: Colors.RedDark100,
177-
tabBarItemTitleFontColor: Colors.RedDark40,
178-
},
179-
focused: {
180-
...DEFAULT_APPEARANCE_IOS.stacked?.focused,
181-
tabBarItemIconColor: Colors.RedLight100,
182-
tabBarItemTitleFontColor: Colors.RedLight40,
183-
},
184-
},
185-
},
162+
standardAppearance: TAB2_APPEARANCE_IOS,
163+
scrollEdgeAppearance: TAB2_APPEARANCE_IOS,
186164
},
187165
android: {
188166
icon: {
@@ -191,6 +169,11 @@ function TestTabsAppearanceDefinedBySelectedTab() {
191169
},
192170
standardAppearance: {
193171
...DEFAULT_APPEARANCE_ANDROID,
172+
tabBarItemTitleSmallLabelFontSize: 10,
173+
tabBarItemTitleLargeLabelFontSize: 16,
174+
tabBarItemTitleFontFamily: 'monospace',
175+
tabBarItemTitleFontStyle: 'italic',
176+
tabBarItemTitleFontWeight: 700,
194177
tabBarBackgroundColor: Colors.PurpleDark100,
195178
tabBarItemRippleColor: Colors.PurpleDark40,
196179
normal: {
@@ -199,11 +182,11 @@ function TestTabsAppearanceDefinedBySelectedTab() {
199182
},
200183
selected: {
201184
tabBarItemIconColor: Colors.RedDark100,
202-
tabBarItemTitleFontColor: Colors.RedDark40,
185+
tabBarItemTitleFontColor: Colors.RedDark60,
203186
},
204187
focused: {
205188
tabBarItemIconColor: Colors.RedLight100,
206-
tabBarItemTitleFontColor: Colors.RedLight40,
189+
tabBarItemTitleFontColor: Colors.RedLight60,
207190
},
208191
tabBarItemActiveIndicatorColor: Colors.PurpleDark120,
209192
},
@@ -215,31 +198,14 @@ function TestTabsAppearanceDefinedBySelectedTab() {
215198
Component: TabScreen,
216199
options: {
217200
title: 'Tab3',
201+
badgeValue: '123',
218202
ios: {
219203
icon: {
220204
type: 'templateSource',
221205
templateSource: require('@assets/variableIcons/icon_fill.png'),
222206
},
223-
standardAppearance: {
224-
...DEFAULT_APPEARANCE_IOS,
225-
stacked: {
226-
...DEFAULT_APPEARANCE_IOS.stacked,
227-
normal: {
228-
...DEFAULT_APPEARANCE_IOS.stacked?.normal,
229-
tabBarItemBadgeBackgroundColor: Colors.GreenDark40,
230-
},
231-
},
232-
},
233-
scrollEdgeAppearance: {
234-
...DEFAULT_APPEARANCE_IOS,
235-
stacked: {
236-
...DEFAULT_APPEARANCE_IOS.stacked,
237-
normal: {
238-
...DEFAULT_APPEARANCE_IOS.stacked?.normal,
239-
tabBarItemBadgeBackgroundColor: Colors.GreenDark40,
240-
},
241-
},
242-
},
207+
standardAppearance: TAB3_APPEARANCE_IOS,
208+
scrollEdgeAppearance: TAB3_APPEARANCE_IOS,
243209
},
244210
android: {
245211
icon: {
@@ -248,8 +214,8 @@ function TestTabsAppearanceDefinedBySelectedTab() {
248214
},
249215
standardAppearance: {
250216
...DEFAULT_APPEARANCE_ANDROID,
251-
tabBarItemBadgeTextColor: Colors.GreenDark120,
252-
tabBarItemBadgeBackgroundColor: Colors.GreenDark40,
217+
tabBarItemBadgeTextColor: Colors.GreenDark100,
218+
tabBarItemBadgeBackgroundColor: Colors.RedDark100,
253219
},
254220
},
255221
},

‎apps/src/tests/single-feature-tests/tabs/test-tabs-appearance-defined-by-selected-tab/scenario-description.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { ScenarioDescription } from '@apps/tests/shared/helpers';
22

33
export const scenarioDescription: ScenarioDescription = {
4-
name: 'Tab Bar Appearance',
4+
name: 'Tab-Specific Appearance',
55
key: 'test-tabs-appearance-defined-by-selected-tab',
6+
details:
7+
'Verifies that the tab bar dynamically updates to reflect the styling of the selected tab.',
68
platforms: ['ios', 'android'],
7-
e2eCoverage: 'tbd',
9+
e2eCoverage: 'incomplete',
810
smokeTest: true,
911
};

0 commit comments

Comments
 (0)