chore(test): add test-tabs-item-icon appearance scenario#4108
Open
LKuchno wants to merge 5 commits into
Open
Conversation
LKuchno
added
area:tabs
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new manual test scenario (test-tabs-item-icon) under the Tabs single-feature tests to visually validate TabsScreen tab bar item icon configuration and tinting behaviors on iOS and Android.
Changes:
- Added a new scenario screen with platform-specific tab routes covering
templateSource,sfSymbol,xcasset,drawableResource, andimageSource. - Added scenario metadata (
scenario-description.ts) and a detailed manual test script (scenario.md). - Registered the scenario in the Tabs scenario group.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-icon/index.tsx | Implements the new Tabs icon scenario screen and route configs for iOS/Android. |
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-icon/scenario-description.ts | Declares the scenario’s metadata (name/key/details/platforms). |
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-icon/scenario.md | Provides manual verification steps and expected results for iOS/Android. |
| apps/src/tests/single-feature-tests/tabs/index.ts | Registers the new scenario in the Tabs scenario list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+156
to
+160
| - [ ] Expected: Each tab swaps between its `icon` and `selectedIcon` | ||
| (where configured) consistently on selection. The correct tint | ||
| behavior is applied each time: green host tint for **Tint** and | ||
| **Xcasset**, red override for **Override**'s selected state, and | ||
| no tint effect for **Image**. No crash, layout freeze, or visual |
Comment on lines
+102
to
+107
| - [ ] Expected: The icon swaps from the outline image to | ||
| the filled image. Both renders use the original PNG | ||
| colors - the host `tabBarTintColor` (green) have NO effect on the | ||
| selected icon. On iOS 18, the unselected icon renders in | ||
| **blue**; on iOS 26+ it renders in the system theme | ||
| color. |
Comment on lines
+73
to
+75
| On iOS 18 the selected title is | ||
| green (host tint); on iOS 26 the selected title is red (override - it's native | ||
| bug KI linked in Notes section). |
LKuchno
changed the title
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 (
test-tabs-item-icon) that exercises the iOS and Android tab bar item icon color props exposed onTabsScreen.For iOS: the scenario covers four distinct icon configuration cases:
templateSource(tintable, check with host tint),sfSymbolwithtabBarItemIconColoroverride,xcasset(tintable, check with host tint), andimageSource(non-tintable). It verifies thatstandardAppearance.stacked.selected.tabBarItemIconColorcorrectly overrides the host-leveltabBarTintColorfor the selected icon color, and thatimageSourceicons are non-tintable and unaffected by either prop.For Android, the scenario covers two distinct icon configuration cases: drawableResource and imageSource. It verifies icon changes for both selected and unselected tabs, as well as tabBarItemIconColor rendering for the icon in normal, selected, and focused states.
Automated Detox assertions are not feasible because Detox does not expose tint color or rendered image attributes of native tab bar items. Known behavioral differences between iOS 18 and iOS 26 are documented in the scenario notes.
Closes: https://github.com/software-mansion/react-native-screens-labs/issues/1399
Closes: https://github.com/software-mansion/react-native-screens-labs/issues/1404
Changes
test-tabs-item-icon/index.tsx- new test screen with for iOS: four tab routes exercisingtemplateSourcehost-tint,sfSymbolwithtabBarItemIconColoroverride,xcassethost-tint, and non-tintableimageSourceicon; for Android: two tab routes exercisingdrawableResourceandimageSourcewith ' tabBarItemIconColor` rendering for icon in normal, selected and focused states.scenario-description.tsscenario.mdwith full manual test steps - separate for each OS type. iOS 18 vs iOS 26 known-issue callouts, and per-step verification checklistsTestTabsItemIconinapps/src/tests/single-feature-tests/tabs/index.tsTest visual documentation
Screen.Recording.2026-05-29.at.11.41.33.mov