chore(test): test-tabs-item-badge test screen with scenario#4128
Open
LKuchno wants to merge 9 commits into
Open
chore(test): test-tabs-item-badge test screen with scenario#4128LKuchno wants to merge 9 commits into
LKuchno wants to merge 9 commits into
Conversation
LKuchno
added
area:tabs
LKuchno
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new manual Tabs test scenario (test-tabs-item-badge) to visually validate tab bar badge rendering across iOS and Android, covering badgeValue plus badge background/text color customization (Android).
Changes:
- Added a new 4-tab scenario screen that exercises default, long, string, and emoji badge cases (including iOS
scrollEdgeAppearancetransition behavior). - Added scenario registration metadata (
scenario-description.ts) for iOS + Android withe2eCoverage: 'incomplete'. - Added a detailed manual test plan (
scenario.md) documenting steps and known platform differences/issues, and registered the scenario in the Tabs scenario group.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 11 comments.
| File | Description |
|---|---|
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-badge/scenario.md | New manual test steps and notes for badge behaviors and platform differences. |
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-badge/scenario-description.ts | Registers scenario metadata (name/key/platforms/coverage). |
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-badge/index.tsx | Implements the new 4-tab test screen configuring badge values and appearance per platform. |
| apps/src/tests/single-feature-tests/tabs/index.ts | Adds the new scenario to the Tabs scenario group registry. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+29
to
+31
| `badgeValue`: " "{'\n'} | ||
| Empty string badge value renders as "small dot" with color define in `tabBarItemBadgeBackgroundColor` or system default if not set.{'\n'}{'\n'} | ||
| Badge appearance is not defined.{'\n'}{'\n'} |
Comment on lines
+38
to
+39
| </View > | ||
| ); |
Comment on lines
+141
to
+142
| </View > | ||
| ); |
Comment on lines
+6
to
+8
| details: | ||
| 'Exercises tab bar item badge props: badgeValue, badgeBackgroundColor, and badgeTextColor (Android only).', | ||
| platforms: ['ios', 'android'], |
Comment on lines
+36
to
+38
| - On iOS 18: badges render the full `badgeValue` string without truncation; | ||
| because the badge text color is white, any characters overflowing the badge's colored | ||
| background will blend into a white screen background and become invisible. |
Comment on lines
+48
to
+53
| - On iOS 26 ([KI 1072](https://github.com/software-mansion/react-native-screens-labs/issues/1072)) | ||
| When `tabBarItemBadgeBackgroundColor` is defined with different colors for the | ||
| normal and selected states, the badge color of the selected tab breaks and | ||
| partially uses the normal state's background color. Additionally, if a tab on | ||
| the left side has a long badge value, it can be affected as well, causing its | ||
| color to partially break and incorrectly inherit the selected state's background color. |
Comment on lines
+107
to
+109
| - [ ] On iOS 26 selected badge pill color is divided into selected (blue) and | ||
| normal (purple), also Tab2 badge is affected and its badge color is partially blue | ||
| (see KI from Note section) |
Comment on lines
+143
to
+144
| - [ ] Tab2's badge is capped at **999+** (the string "1234567890" exceeds the | ||
| maximum and is truncated by the system). |
Comment on lines
+195
to
+196
| - [ ]Each badge is displayed correctly on every tab switch. The colors, text | ||
| values, and transparent states remain stable. |
Comment on lines
+184
to
+186
| - [ ] The badge background is transparent for all tabs, so the emoji and text | ||
| floats without a colored pill. | ||
| - [ ] The badge text color is red. |
…ns into @lkuchno/test-tabs-item-badge
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 test screen with manual scenario (
test-tabs-item-badge) that exercises thebadgeValue,tabBarItemBadgeBackgroundColor, andtabBarItemBadgeTextColor(Android only) props onTabsScreen. The scenario covers both iOS and Android and is structured as four tabs, each demonstrating a distinct badge use case: default system appearance, a long numeric string that is truncated by the platform, a custom string badge with state-aware colors, and an emoji badge with transparent background. For iOS, the scenario also exercisesscrollEdgeAppearancebadge color transitions.The
scenario.mddocuments known platform differences (iOS 18 vs iOS 26 truncation behavior, Android999+cap) and a documented known issue on iOS 26 withtabBarItemBadgeBackgroundColorselected/normal state color bleed.Closes: https://github.com/software-mansion/react-native-screens-labs/issues/1414
Changes
test-tabs-item-badgescenario directory with four-tab layout covering default, long-value, string, and emoji badge cases for both iOS and Androidscenario-description.tsregistering the scenario for both platforms withe2eCoverage: 'incomplete'scenario.mdwith full manual test steps, per-platform checklists, OS-version caveats (iOS 18 vs iOS 26, Android API 36), and a known-issue note for iOS 26 badge color bleedTestTabsItemBadgeinapps/src/tests/single-feature-tests/tabs/index.ts