chore(test): test-tabs-tab-bar-experimental-userInterfaceStyle with scenario by LKuchno · Pull Request #3881 · software-mansion/react-native-screens

LKuchno · 2026-04-14T09:42:09Z

Description

New screen for experimental_userInterfaceStyle prop (iOS only) for dark and light value with corresponding manual scenario.

Closes: https://github.com/software-mansion/react-native-screens-labs/issues/1116

Changes

Adding new screen and scenario in new directory to cover experimental_userInterfaceStyle prop set to dark and light
Screen added to tabs/index.ts to be displayed under SFT category

…cenario

…ns into @lkuchno/test_experimental_userInterfaceStyle

Copilot

Pull request overview

Adds a new iOS-only single-feature test (SFT) scenario to manually verify experimental_userInterfaceStyle behavior for tab bars when forcing light/dark appearance, focusing on avoiding flicker/flash during navigation and tab switches.

Changes:

Introduces a new SFT scenario module with a home screen and two flows (forced dark / forced light) built with the gamma Stack + Tabs containers.
Adds dedicated tab screens configuring ios.experimental_userInterfaceStyle for both tabs.
Adds a manual scenario.md and registers the scenario in the tabs SFT index.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/scenario.md	Manual verification steps and expectations for forced light/dark UI style behavior.
apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/lightScreen.tsx	Light-style root + tab screens (forced light interface style).
apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/darkScreen.tsx	Dark-style root + tab screens (forced dark interface style).
apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/index.tsx	Scenario registration + stack navigation between home/root/pushed tab containers.
apps/src/tests/single-feature-tests/tabs/index.ts	Registers the new scenario in the Tabs SFT group.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-14T10:05:56Z

apps/src/tests/single-feature-tests/tabs/index.ts

 import TestTabsStaleStateUpdateRejection from './test-tabs-stale-update-rejection';
 import TestTabsTabBarMinimizeBehavior from './test-tabs-tab-bar-minimize-behavior-ios';
 import TestTabsTabBarControllerMode from './test-tabs-tab-bar-controller-mode-ios';
+import TestTabsTabBarExperimentalUserInterfaceStyle from './test-tabs-tab-bar-experimental-userInterfaceStyle-ios';


The new scenario directory/import path uses mixed casing (experimental-userInterfaceStyle) while the rest of the tabs SFT scenarios use lowercase directory names. Consider renaming the directory (and updating imports) to be all-lowercase to match existing naming and reduce case-sensitivity footguns across platforms/CI.

Suggested change

import TestTabsTabBarExperimentalUserInterfaceStyle from './test-tabs-tab-bar-experimental-userInterfaceStyle-ios';

import TestTabsTabBarExperimentalUserInterfaceStyle from './test-tabs-tab-bar-experimental-user-interface-style-ios';

Copilot · 2026-04-14T10:05:57Z

...ngle-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/darkScreen.tsx

+    },
+    description: {
+        fontSize: 13,
+        color: '#555',


styles.description uses #555 text on a black background, which results in very low contrast and is hard to read (especially on smaller devices). Please use a lighter text color (or reuse a light theme color) so the instructions remain legible during the manual test.

Suggested change

color: '#555',

color: '#ccc',

Copilot · 2026-04-14T10:05:57Z

.../single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/scenario.md

+
+4. Tap **"Push screen with style: dark"** and observe tab bar.
+
+- [ ] Expected: `DarkScreen` is pushed. The tab bar reflects a **dark** style and appears without flash, flicker, or reversion to light style.


Step 4/Expected refers to DarkScreen being pushed, but the UI/routes in this scenario don’t appear to use that name (the pushed route is the tab container with dark style). Please align the expected wording with the actual screen title/route name the tester will see to avoid confusion.

Suggested change

- [ ] Expected: `DarkScreen` is pushed. The tab bar reflects a **dark** style and appears without flash, flicker, or reversion to light style.

- [ ] Expected: The dark-styled tab screen is pushed, showing **Tab1** and **Tab2**. The tab bar reflects a **dark** style and appears without flash, flicker, or reversion to light style.

Copilot · 2026-04-14T10:05:58Z

.../single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/scenario.md

+
+## Details
+
+**Description:** Verifies the experimental_userInterfaceStyle prop on iOS, which allows a screen to override the global system appearance (Light/Dark mode). Test focus on ensures that when a screen has a forced style (e.g., Dark) different from the system (e.g., Light), there is no "visual glitching," such as flickering, flashing, or momentary reversion to the system theme during pushes, pops, or tab switches.


The scenario description sentence is grammatically incorrect ("Test focus on ensures...") and is hard to parse. Please rewrite it so the intent is clear for manual testers (e.g., "This test ensures..." / "The test focuses on ensuring...").

Suggested change

**Description:** Verifies the experimental_userInterfaceStyle prop on iOS, which allows a screen to override the global system appearance (Light/Dark mode). Test focus on ensures that when a screen has a forced style (e.g., Dark) different from the system (e.g., Light), there is no "visual glitching," such as flickering, flashing, or momentary reversion to the system theme during pushes, pops, or tab switches.

**Description:** This test verifies the experimental_userInterfaceStyle prop on iOS, which allows a screen to override the global system appearance (Light/Dark mode). It focuses on ensuring that when a screen has a forced style (for example, Dark) different from the system appearance (for example, Light), there is no visual glitching, such as flickering, flashing, or momentary reversion to the system theme during pushes, pops, or tab switches.

Copilot · 2026-04-14T10:05:58Z

.../single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/scenario.md

+
+- [ ] Expected: Both tabs maintain the dark interface style. No flash, flicker, or reversion to light style on tab switch.
+
+6. Pop back to `Screen1` and then to `Home` screen.


Step 6 refers to popping back to Screen1, but this scenario doesn’t use a Screen1 label/route (the intermediate screen is the style-specific root screen reached from Home). Please update the step wording to match the actual screen/route names a tester will see.

Suggested change

6. Pop back to `Screen1` and then to `Home` screen.

6. Pop back to the `Dark` screen, and then pop back to the `Home` screen.

Copilot · 2026-04-14T10:05:58Z

.../single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/scenario.md

+
+9. Switch between **Tab1** and **Tab2** on the pushed screen.
+
+- [ ] Expected: Both tabs maintain the light interface style. No flash, flicker, or reversion to light style on tab switch.


In the light-style section, the expected result says there should be no "reversion to light style"—but the forced style here is already light. This should likely say no reversion to dark (system) style to make the flicker check meaningful.

Suggested change

- [ ] Expected: Both tabs maintain the light interface style. No flash, flicker, or reversion to light style on tab switch.

- [ ] Expected: Both tabs maintain the light interface style. No flash, flicker, or reversion to dark style on tab switch.

Copilot · 2026-04-14T10:05:58Z

...ts/single-feature-tests/tabs/test-tabs-tab-bar-experimental-userInterfaceStyle-ios/index.tsx

+
+const SCENARIO: Scenario = {
+    name: 'Tab Bar Experimental UIStyle',
+    key: 'test-tabs-tab-bar-experimental-userInterfaceStyle-ios',


Scenario key values in this folder are consistently kebab-case lowercase (e.g. test-tabs-tab-bar-controller-mode-ios), but this new key contains uppercase characters (...userInterfaceStyle...). Please change it to lowercase for consistency and to avoid tooling that assumes lowercase keys (testIDs/routes/links).

Suggested change

key: 'test-tabs-tab-bar-experimental-userInterfaceStyle-ios',

key: 'test-tabs-tab-bar-experimental-userinterfacestyle-ios',

LKuchno added 4 commits April 14, 2026 11:28

chore(test): test-tabs-tab-bar-experimental-userInterfaceStyle with s…

2e768d0

…cenario

Merge branch 'main' of github.com:software-mansion/react-native-scree…

81d43a8

…ns into @lkuchno/test_experimental_userInterfaceStyle

darkscreen style update

d384555

comment delete

4ee1262

LKuchno added area:tabs Issue related to bottom tabs type:chore A general maintenance task, that does not fall into other categories. labels Apr 14, 2026

LKuchno added 2 commits April 14, 2026 11:58

name chane to include ios platform

cd19f59

path to screen in index file updated

90ebb49

LKuchno requested review from Copilot and kkafar April 14, 2026 10:00

Copilot started reviewing on behalf of LKuchno April 14, 2026 10:01 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

LKuchno requested a review from kligarski April 14, 2026 10:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(test): test-tabs-tab-bar-experimental-userInterfaceStyle with scenario#3881

chore(test): test-tabs-tab-bar-experimental-userInterfaceStyle with scenario#3881
LKuchno wants to merge 6 commits intomainfrom
@lkuchno/test_experimental_userInterfaceStyle

LKuchno commented Apr 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	import TestTabsTabBarExperimentalUserInterfaceStyle from './test-tabs-tab-bar-experimental-userInterfaceStyle-ios';
	import TestTabsTabBarExperimentalUserInterfaceStyle from './test-tabs-tab-bar-experimental-user-interface-style-ios';


		4. Tap "Push screen with style: dark" and observe tab bar.

		- [ ] Expected: `DarkScreen` is pushed. The tab bar reflects a dark style and appears without flash, flicker, or reversion to light style.

	- [ ] Expected: `DarkScreen` is pushed. The tab bar reflects a dark style and appears without flash, flicker, or reversion to light style.
	- [ ] Expected: The dark-styled tab screen is pushed, showing Tab1 and Tab2. The tab bar reflects a dark style and appears without flash, flicker, or reversion to light style.


		## Details

		Description: Verifies the experimental_userInterfaceStyle prop on iOS, which allows a screen to override the global system appearance (Light/Dark mode). Test focus on ensures that when a screen has a forced style (e.g., Dark) different from the system (e.g., Light), there is no "visual glitching," such as flickering, flashing, or momentary reversion to the system theme during pushes, pops, or tab switches.


		- [ ] Expected: Both tabs maintain the dark interface style. No flash, flicker, or reversion to light style on tab switch.

		6. Pop back to `Screen1` and then to `Home` screen.

	6. Pop back to `Screen1` and then to `Home` screen.
	6. Pop back to the `Dark` screen, and then pop back to the `Home` screen.


		9. Switch between Tab1 and Tab2 on the pushed screen.

		- [ ] Expected: Both tabs maintain the light interface style. No flash, flicker, or reversion to light style on tab switch.

	key: 'test-tabs-tab-bar-experimental-userInterfaceStyle-ios',
	key: 'test-tabs-tab-bar-experimental-userinterfacestyle-ios',

Uh oh!

Conversation

LKuchno commented Apr 14, 2026

Description

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants