chore(tabs): add test-tabs-layout-appearances-ios screen and scenario (iOS)#4085
Open
LKuchno wants to merge 10 commits into
Open
chore(tabs): add test-tabs-layout-appearances-ios screen and scenario (iOS)#4085LKuchno wants to merge 10 commits into
LKuchno wants to merge 10 commits into
Conversation
…ns into @lkuchno/test-tabs-display-mode-ios
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
LKuchno
changed the title
LKuchno
added
platform:ios
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new iOS-only manual test scenario under the Tabs single-feature tests to exercise TabsScreenAppearanceIOS layout appearance buckets (stacked, inline, compactInline) and state-dependent title styling (color + italic on selected), including documented behavior differences on iOS 18 vs iOS 26+.
Changes:
- Added a new Tabs test scenario screen (
TestTabsLayoutAppearances) with per-bucket appearance configuration and an in-app “Info” explainer. - Added scenario metadata marking the scenario as iOS-only with
e2eCoverage: 'incomplete'. - Added a detailed manual test plan (
scenario.md) describing expected visuals and rotation-driven bucket switching; registered the scenario in the Tabs group index.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| apps/src/tests/single-feature-tests/tabs/test-tabs-layout-appearances-ios/scenario.md | New manual test instructions and expected results for layout-appearance buckets across iOS versions/devices. |
| apps/src/tests/single-feature-tests/tabs/test-tabs-layout-appearances-ios/scenario-description.ts | New scenario metadata (iOS-only, incomplete e2e coverage). |
| apps/src/tests/single-feature-tests/tabs/test-tabs-layout-appearances-ios/index.tsx | New scenario UI implementing bucket-specific appearances and explanatory copy. |
| apps/src/tests/single-feature-tests/tabs/index.ts | Registers the new scenario in the Tabs single-feature test group. |
Comments suppressed due to low confidence (3)
apps/src/tests/single-feature-tests/tabs/test-tabs-layout-appearances-ios/scenario.md:41
- The sentence has an extra dash ("appearance — is") which reads like a typo and makes the note harder to follow. Please adjust punctuation/wording for clarity.
- On **iOS 26**, the `normal` (unselected) state appearance — is not applied
to unselected tabs. All unselected tabs adopt a system-default appearance.
apps/src/tests/single-feature-tests/tabs/test-tabs-layout-appearances-ios/scenario.md:47
- The last sentence is grammatically incorrect/unclear ("Instead of it
compactInlineconfiguration is displayed"). Please rephrase so it’s unambiguous what happens on iOS 26 (e.g. thatcompactInlineis used instead ofinline).
- On **iOS 26**, configuring the `inline` bucket has no visible effect on
iPhone because the system never activates the `inlineLayoutAppearance` on
that platform version. Testers should not expect blue titles to appear on
an iPhone running iOS 26. Instead of it `compactInline` configuration is displayed.
apps/src/tests/single-feature-tests/tabs/test-tabs-layout-appearances-ios/scenario.md:49
- This note is grammatically incorrect and ambiguous ("Icon color is set to system default - for selected tab is blue..."). Please reword to clearly describe selected vs unselected icon colors (and whether this varies by iOS version/theme).
- Icon color is set to system default - for selected tab is blue and for
unselected black or gray depends on OS version.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,13 @@ | |||
| import { ScenarioDescription } from "@apps/tests/shared/helpers"; | |||
Comment on lines
+32
to
+49
| - iOS simulator or device running **iOS 18** and second with **iOS 26**. | ||
| - For full coverage of all three display modes: | ||
| - iPhone (any) in portrait → `stacked` | ||
| - iPhone Pro Max in landscape → `inline` (iOS 18 or lower only) | ||
| - iPhone Pro (non-Max) in landscape → `compactInline` (for iOS26 displayed also on Max) | ||
|
|
||
| ## Note | ||
|
|
||
| - On **iOS 26**, the `normal` (unselected) state appearance — is not applied | ||
| to unselected tabs. All unselected tabs adopt a system-default appearance. | ||
| Therefore the normal / colored label on unselected tabs is only observable | ||
| on iOS 18. | ||
| - On **iOS 26**, configuring the `inline` bucket has no visible effect on | ||
| iPhone because the system never activates the `inlineLayoutAppearance` on | ||
| that platform version. Testers should not expect blue titles to appear on | ||
| an iPhone running iOS 26. Instead of it `compactInline` configuration is displayed. | ||
| - Icon color is set to system default - for selected tab is blue and for | ||
| unselected black or gray depends on OS version. |
Comment on lines
+67
to
+70
| In each case the{' '} | ||
| <Text style={styles.bold}>selected tab title is italic</Text> and the tab icon color is system default:{' '} | ||
| <Text style={{ color: PlatformColor('systemBlue') }}>blue</Text>;{'\n\n'} | ||
| The unselected tab titles font and icons color follows system default values: a normal font and gray or black colors. On iOS 18, the tab item label color is set to a darker shade of the bucket color while on iOS 26 it follows the system default. |
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 screen — Tab Bar Layout Appearances (iOS) — to
apps/src/tests/single-feature-tests/tabs/. The screen exercisesstackedLayoutAppearance,inlineLayoutAppearance, andcompactInlineLayoutAppearanceforTabsScreenAppearanceIOS, usingtabBarItemTitleFontColoras the visual discriminator between buckets (red = stacked, blue = inline, green = compactInline) andtabBarItemTitleFontStyle: 'italic'on the selected state as the font-style signal. The scenario documents explicit iOS 18 vs. iOS 26+ differences: theinlinebucket is not honored on iOS 26+ iPhones, and normal-state (unselected) color falls back to the system default on iOS 26+. This PR is iOS-only; no Android changes are included.Closes:
https://github.com/software-mansion/react-native-screens-labs/issues/1466
Note:
e2eCoverageis set toincompletebecause Detox cannot introspect nativeUITabBarItemtypographic attributes (font style, font color) — all verification steps are manual.Changes
test-tabs-layout-appearances-ios/scenario covering all three layout-appearance buckets (stacked,inline,compactInline), normal vs. selected state styling, and rotation-triggered bucket switchingscenario-description.tsdeclaring the scenario as iOS-only withe2eCoverage: 'incomplete'andsmokeTest: falsescenario.mdwith full manual test steps, device/OS prerequisites, and iOS 18 vs. iOS 26+ caveatsTestTabsLayoutAppearancesinapps/src/tests/single-feature-tests/tabs/index.tsTest visual presentation
iPhone16ProiOS18.6.mov
iPhone16ProMAXiOS18.6.mov
iPhone17ProiOS26.5.mov