chore(tabs): add tab-item-title appearance scenario for iOS#4083
Open
LKuchno wants to merge 14 commits into
Open
chore(tabs): add tab-item-title appearance scenario for iOS#4083LKuchno wants to merge 14 commits into
LKuchno wants to merge 14 commits into
Conversation
…ns into @lkuchno/test-tabs-item-title-ios
… with tab-item-title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new iOS-only manual Tabs test scenario to validate tab bar item title appearance props (label/title behavior, color override vs host tint, and font/position styling) and registers it in the Tabs scenario group.
Changes:
- Added a new manual scenario screen (
test-tabs-item-title-ios) with three tabs covering long-title truncation, title color override vstabBarTintColor, and combined font/position props. - Registered the scenario as iOS-only with
e2eCoverage: 'incomplete'and added a step-by-step manualscenario.md. - Wired the new scenario into the Tabs scenario list so it appears in-app.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-title-ios/scenario.md | Manual verification steps + known-issue notes for iOS title appearance behavior. |
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-title-ios/scenario-description.ts | Scenario metadata (name/key/platform/e2eCoverage). |
| apps/src/tests/single-feature-tests/tabs/test-tabs-item-title-ios/index.tsx | New scenario implementation exercising iOS tab bar title appearance props. |
| 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
+28
to
+30
| - **Normal (unselected) state ([iOS26 KI](https://github.com/software-mansion/react-native-screens-labs/discussions/395)):** On iOS 18 and lower, if the normal | ||
| (unselected) is set it will applies to unselected tab titles. On iOS 26, | ||
| normal-state color is not applied. |
|
|
||
| --- | ||
|
|
||
| ### Font and possition |
Comment on lines
+84
to
+85
| (no font override is applied to the normal state). | ||
| On iOS 18 and lower, unselected tab titles appear in BlueDark100. |
Comment on lines
+14
to
+20
| function TintOverrideTab() { | ||
| const { updateHostConfig } = useTabsHostConfig(); | ||
| useEffect(() => { | ||
| updateHostConfig({ | ||
| ios: { tabBarTintColor: Colors.GreenDark100 }, | ||
| }); | ||
| }, [updateHostConfig]); |
Comment on lines
+111
to
+117
| { | ||
| name: 'Font and Position', | ||
| Component: FontTab, | ||
| options: { | ||
| ...DEFAULT_TAB_ROUTE_OPTIONS, | ||
| title: 'Font and Position', | ||
| tabBarItemTestID: 'tab-font', |
LKuchno
changed the title
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…re-mansion/react-native-screens into @lkuchno/test-tabs-item-title-ios
LKuchno
added
platform:ios
t0maboro
approved these changes
May 22, 2026
| @@ -0,0 +1,150 @@ | |||
| import React from 'react'; | |||
| import { StyleSheet, Text, View } from 'react-native'; | |||
| import {scenarioDescription} from './scenario-description'; | |||
| }, | ||
| hint: { | ||
| fontSize: 13, | ||
| color: '#555', |
Contributor
There was a problem hiding this comment.
nit: I'd use colors from our Colors palette
| import type { ScenarioDescription } from '@apps/tests/shared/helpers'; | ||
|
|
||
| export const scenarioDescription: ScenarioDescription = { | ||
| name: 'Tab Bar Item Title (iOS)', |
Contributor
There was a problem hiding this comment.
nit: isn't (iOS) redundant in that title? we have an icon indicating that TC is iOS-only
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-title-ios) that exercises 8 iOS-only tab bar item title appearance props exposed onTabsScreen:title(string label),tabBarItemTitleFontColor,tabBarItemTitleFontFamily,tabBarItemTitleFontSize,tabBarItemTitleFontStyle,tabBarItemTitleFontWeight, andtabBarItemTitlePositionAdjustment. The scenario also validates thattabBarItemTitleFontColorcorrectly overrides the host-leveltabBarTintColorfor the label while leaving the icon tint unaffected.This is iOS-only; Detox automated assertions are not feasible because Detox does not expose color or font attributes of native tab bar items. Two known issues are documented in the scenario notes: the
normal-state color is not applied on iOS 26, and long-title truncation does not work correctly on iOS 18 and lower.Closes: https://github.com/software-mansion/react-native-screens-labs/issues/1396
Changes
test-tabs-item-title-ios/index.tsx— new test screen with three tab routes exercising long-title truncation,tabBarItemTitleFontColorvstabBarTintColoroverride, and combined font/position propsscenario-description.tsregistering the scenario as iOS-only, e2eCoverageincomplete,smokeTest: falsescenario.mdwith full manual test steps, known-issue callouts for iOS 26 normal-state color and iOS 18 truncation bug, and checklist items for each testable behaviorTestTabsItemTitleinapps/src/tests/single-feature-tests/tabs/index.tsso it appears in the scenario listTest visual presentation
Screen.Recording.2026-05-22.at.10.44.24.mov