Skip to content

Conversation

@kligarski
Copy link
Contributor

@kligarski kligarski commented Dec 17, 2025

Description

Adds customization of backgroundColor for native tabs container (UITabBarController.view on iOS, TabsHost on Android) and tab screen (RNSBottomTabsScreenComponentView on iOS, TabScreen on Android).

Android iOS
3492_Android.mp4
3492_iOS.mov

Closes https://github.com/software-mansion/react-native-screens-labs/issues/721.
Supersedes #3478.

Comparison of different approaches to setting background color on iOS

This PR allows for (at least) 3 kinds of setting background color in tabs. Due to asynchronous nature, different approaches result in different effect.

Tab screen + React View has background color

This is similar to current approach where tab screen uses systemBackgroundColor and user defines background color via View inside components passed to tab screen. This approach was used to mitigate problems with liquid glass tab bar appearance adaptation (more details: #3279).

bg_tab_and_react.mov

First, background color of tab screen is visible before tab's content is rendered by React and correct color appears.

Only React View has background color

This is similar to approach suggested in #3478 (transparent screen). While this seems to work better on first tab renders, switching between similar tabs after they are rendered causes a flash.

bg_only_react.mov

This is reproducible in bare UIKit app when child VC's view has clear background color and its subview has different background color.

Only Tab screen has background color

This approach is possible thanks to this PR and it is closes to native platform but tab's content still appears after a delay because it needs to be rendered by React - this causes a flash on first render.

bg_only_tab.mov

Changes

  • add nativeContainerStyle prop to BottomTabs component with backgroundColor field
  • add style prop to BottomTabsScreen component with backgroundColor field
  • add Test3492

Test code and steps to reproduce

Run Test3492.

Checklist

  • Included code example that can be used to test this change
  • Ensured that CI passes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants