chore(test): test-tabs-native-container-style test screen with scenario by LKuchno · Pull Request #4134 · software-mansion/react-native-screens

LKuchno · 2026-06-08T11:11:54Z

Description

Adds a new test screen with manual scenario (test-tabs-native-container-style) that exercises the nativeContainerStyle prop on TabsHost. The scenario allows the user to pick a container background color (unset / blue / yellow / purple) via a SettingsPicker and observe the native container styling behavior on both iOS and Android.

Platform surfaces covered: on iOS the color is applied to the UITabBarController's root view (behind both the content area and the tab bar); on Android it is applied to the FrameLayout wrapping the focused screen and the BottomNavigationView. The scenario.md documents platform-specific rendering differences between iOS 18, iOS 26, and Android API 36, as well as tab-switching persistence and rapid cycling edge-case steps.

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

Changes

Test/Tabs: Added test-tabs-native-container-style scenario directory with a two-tab layout (Config + Transparent) covering background color selection via SettingsPicker for both iOS and Android. First tab has tabBarBackgroundColor set to Red (Android and iOS 18 and lower), Transparent tab has tabBarBackgroundColor set to transparent (Android) or not set (iOS 18 and lower -> no scrollEdgeAppearance falls into transparent)
Test/Tabs: Added scenario-description.ts registering the scenario for both platforms with e2eCoverage: 'incomplete' and smokeTest: false
Test/Tabs: Added scenario.md with full manual test steps.
Test/Tabs: Registered TestTabsNativeContainerStyle in apps/src/tests/single-feature-tests/tabs/index.ts

Test visual documentation

Android lvl 36	iOS 18.6	iOS 26.5
Screen.Recording.2026-06-11.at.08.39.43.mov	Screen.Recording.2026-06-11.at.09.09.01.mov	Screen.Recording.2026-06-11.at.09.09.33.mov

…ns into @lkuchno/test-tabs-native-container-style

Copilot

Pull request overview

Adds a new manual tabs test scenario (test-tabs-native-container-style) to exercise nativeContainerStyle.backgroundColor on TabsHost via a SettingsPicker, with accompanying scenario registration and documentation for iOS/Android visual verification.

Changes:

Added a new two-tab scenario (Config + Tab) that updates nativeContainerStyle.backgroundColor at runtime.
Registered the scenario in the tabs single-feature-tests group.
Added a manual scenario.md describing expected rendering/persistence behaviors across platforms.

Reviewed changes

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

File	Description
apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario.md	Manual steps/expectations for verifying native container background behavior.
apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/scenario-description.ts	Scenario metadata used to register/display the scenario.
apps/src/tests/single-feature-tests/tabs/test-tabs-native-container-style/index.tsx	Scenario implementation: picker-driven host config updates + two-tab layout.
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.

+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { scenarioDescription } from './scenario-description';
+import { createScenario } from '@apps/tests/shared/helpers';
+import { SettingsPicker } from '@apps/shared';
+import { Colors } from '@apps/shared/styling';
+import type { ColorValue } from 'react-native';


+    if (bgColor !== undefined) {
+      console.warn(
+        `[test-tabs-native-container-style] Unrecognized nativeContainerStyle.backgroundColor: ${String(bgColor)}. ` +
+          `Picker shows 'unset' but a native color may be set. This may indicate a platform-specific color serialization issue.`
+      );


kligarski · 2026-06-10T17:45:35Z

+
+## Note
+
+- The color change applies immediately upon selecting a new value; no


Is this note necessary? Isn't the immediate change always expected and we should only note this if the change requires restart?

I removed it and refactored note section with information about tab bar bg color behavior across the platform - this made me to refactor screen to check behavior with transparent and no transparent background settings for android and ios18 and lower
d23fe90

kligarski · 2026-06-10T17:49:08Z

+- [ ] **iOS 26:** The blue color is visible behind the tab content area and through the liquid glass tab bar.
+- [ ] **Android:** The blue color is visible in the area surrounding the focused content screen. The tab bar retains the system default background color.
+
+3. Tap the **Tab** tab in the tab bar.


nit: we can rename the second tab because "Tap the Tab tab" sounds funny, but we can keep it as well - up to you.

Renamed to 'Transparent' as after screen refactor it make sense
d23fe90
d47ab69

kligarski · 2026-06-10T17:58:19Z

+  may partially obscure the color unless the tab bar has a transparent
+  or semi-transparent background.
+- On Android the color fills the `FrameLayout` container, which is
+  visible in the gutters around the focused screen content and behind


in the gutters around the focused screen

I'm not sure what you mean here, the entire background changes color apart from non-translucent tab bar, right? So what are the "gutters" you mention here?

… transparent/no-transparent tab bar bg, updating scenario

…r fully transparent - scenario polishing

…ns into @lkuchno/test-tabs-native-container-style

Copilot

Pull request overview

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

LKuchno · 2026-06-11T07:20:08Z

+      ios: {
+        ...DEFAULT_TAB_ROUTE_OPTIONS.ios,
+        scrollEdgeAppearance: {
+          tabBarBackgroundColor: Colors.RedDark100,
+        },
+      },


LKuchno added 3 commits June 8, 2026 12:54

chore(test): test-tabs-native-container-style screen with scenario

f70fcba

space added to ios18 ios26

713cbba

adjustment after code review

3398aaa

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

LKuchno requested a review from Copilot June 8, 2026 11:16

Copilot started reviewing on behalf of LKuchno June 8, 2026 11:16 View session

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

d3e1044

…ns into @lkuchno/test-tabs-native-container-style

Copilot AI reviewed Jun 8, 2026

View reviewed changes

LKuchno added 2 commits June 9, 2026 13:44

index and scenario-description small adjustment after AI review

e7a460c

delete repeated informations

dc59aa2

LKuchno requested a review from kligarski June 9, 2026 12:30

kligarski approved these changes Jun 10, 2026

View reviewed changes

LKuchno added 4 commits June 11, 2026 08:16

changing tab name, config tab appearance for android and ios to check…

d23fe90

… transparent/no-transparent tab bar bg, updating scenario

adding tabBarItemActiveIndicatorEnabled: false to make android tab ba…

d47ab69

…r fully transparent - scenario polishing

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

666acc4

…ns into @lkuchno/test-tabs-native-container-style

chamging text on Transparent tab

3ab1582

LKuchno requested a review from Copilot June 11, 2026 06:50

Copilot started reviewing on behalf of LKuchno June 11, 2026 06:50 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

LKuchno added 3 commits June 11, 2026 09:14

adding standardAppearance setting for ios Config tab

59a2fd8

removing unused styles

b9cc395

fixing color expectation and indentation

48deb26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(test): test-tabs-native-container-style test screen with scenario#4134

chore(test): test-tabs-native-container-style test screen with scenario#4134
LKuchno wants to merge 13 commits into
mainfrom
@lkuchno/test-tabs-native-container-style

LKuchno commented Jun 8, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

kligarski Jun 10, 2026

Uh oh!

LKuchno Jun 11, 2026

Uh oh!

kligarski Jun 10, 2026

Uh oh!

LKuchno Jun 11, 2026

Uh oh!

kligarski Jun 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

LKuchno Jun 11, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		## Note

		- The color change applies immediately upon selecting a new value; no

Uh oh!

Conversation

LKuchno commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Test visual documentation

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

kligarski Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

LKuchno Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

kligarski Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

LKuchno Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

kligarski Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

LKuchno Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

LKuchno commented Jun 8, 2026 •

edited

Loading