chore(test): add test-tabs-general-appearance-android scenario#4118
Open
LKuchno wants to merge 14 commits into
Open
chore(test): add test-tabs-general-appearance-android scenario#4118LKuchno wants to merge 14 commits into
LKuchno wants to merge 14 commits into
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new manual (non-e2e) Android-focused Tabs scenario that exercises standardAppearance customization points (label visibility mode, background color, ripple, and active indicator) to validate tab bar rendering and runtime updates.
Changes:
- Added a new Android tab bar appearance manual test scenario (code + metadata + written steps).
- Implemented four tabs (Default / Label / Ripple / Indicator) to showcase distinct appearance configurations and one interactive control for label visibility.
- Registered the new scenario in the Tabs single-feature test group.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 27 comments.
| File | Description |
|---|---|
| apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario.md | Manual test steps and visual assertions for tab bar appearance behaviors. |
| apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/scenario-description.ts | Scenario metadata (name/key/platforms/e2e coverage). |
| apps/src/tests/single-feature-tests/tabs/test-tabs-general-appearance-android/index.tsx | Scenario implementation: four tabs and per-tab standardAppearance configurations. |
| apps/src/tests/single-feature-tests/tabs/index.ts | Registers the new scenario in the Tabs scenario group. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+3
to
+7
| import { | ||
| TabRouteConfig, | ||
| TabsContainer, | ||
| useTabsNavigationContext, | ||
| } from '@apps/shared/gamma/containers/tabs'; |
Collaborator
Author
There was a problem hiding this comment.
Applied as its used this way in other tests.
| 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'; |
Collaborator
Author
There was a problem hiding this comment.
We don't import TabsScreenAppearanceAndroid as type in other tests so I kept this version.
Comment on lines
+81
to
+83
| <Text style={styles.hint}> | ||
| `tabBarItemLabelVisibilityMode`: 'selected' | ||
| {'\n'} |
Comment on lines
+106
to
+108
| <Text style={styles.hint}> | ||
| `tabBarItemLabelVisibilityMode`: 'selected' | ||
| {'\n'} |
Comment on lines
+125
to
+135
| const ROUTE_CONFIGS: TabRouteConfig[] = [ | ||
| { | ||
| name: 'Default', | ||
| Component: DefaultTab, | ||
| options: { | ||
| title: 'Default', | ||
| android: { | ||
| ...DEFAULT_TAB_ROUTE_OPTIONS.android, | ||
| }, | ||
| }, | ||
| }, |
Comment on lines
+66
to
+67
| - [ ] "Default" becomes selected and its label is now | ||
| shown. The label for other tabs are no longer visible. |
Comment on lines
23
to
24
|
|
||
|
|
Comment on lines
+139
to
+147
| options: { | ||
| title: 'Label', | ||
| android: { | ||
| ...DEFAULT_TAB_ROUTE_OPTIONS.android, | ||
| standardAppearance: { | ||
| tabBarItemLabelVisibilityMode: 'auto', | ||
| }, | ||
| }, | ||
| }, |
Comment on lines
+152
to
+165
| options: { | ||
| title: 'Ripple', | ||
| android: { | ||
| ...DEFAULT_TAB_ROUTE_OPTIONS.android, | ||
| standardAppearance: { | ||
| tabBarBackgroundColor: Colors.NavyDark100, | ||
| tabBarItemRippleColor: Colors.YellowDark100, | ||
| tabBarItemActiveIndicatorEnabled: false, | ||
| tabBarItemActiveIndicatorColor: Colors.GreenLight100, | ||
| tabBarItemLabelVisibilityMode: 'labeled', | ||
|
|
||
| }, | ||
| }, | ||
| }, |
Comment on lines
+170
to
+182
| options: { | ||
| title: 'Indicator', | ||
| android: { | ||
| ...DEFAULT_TAB_ROUTE_OPTIONS.android, | ||
| standardAppearance: { | ||
| tabBarBackgroundColor: Colors.PurpleDark100, | ||
| tabBarItemRippleColor: Colors.YellowDark100, | ||
| tabBarItemActiveIndicatorEnabled: true, | ||
| tabBarItemActiveIndicatorColor: Colors.GreenLight100, | ||
| tabBarItemLabelVisibilityMode: 'labeled', | ||
| }, | ||
| }, | ||
| }, |
LKuchno
added
platform:android
…ns into @lkuchno/test-tabs-general-apperance-android
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds a new manual test scenario for Android tab bar general appearance, covering the
standardAppearanceproperties ofTabsScreenAppearanceAndroid. The scenario provides four tabs: Default, Label, Ripple, and Indicator - each statically or interactively demonstrating a distinct subset of the Android tab bar appearance API: default system rendering, dynamictabBarItemLabelVisibilityMode, transient ripple color with indicator disabled, and persistent active indicator with ripple.Closes: https://github.com/software-mansion/react-native-screens-labs/issues/1402
Changes
test-tabs-general-appearance-androidscenario directory withindex.tsx,scenario-description.ts, andscenario.mdindex.tsximplements four tab screens (Default, Label, Ripple, Indicator) exercisingtabBarItemLabelVisibilityMode,tabBarBackgroundColor,tabBarItemRippleColor,tabBarItemActiveIndicatorEnabled, andtabBarItemActiveIndicatorColorviastandardAppearancescenario.mddocuments manual test steps with visual assertions covering label visibility mode cycling, transient ripple behaviour, and persistent active indicator renderingTestTabsGeneralAppearanceinapps/src/tests/single-feature-tests/tabs/index.tsTest visual documentation
test-tabs-general-appearance-android.mov