feat(Tabs): allow full tabs background color styling #3492
+635
−13
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 customization of
backgroundColorfor native tabs container (UITabBarController.viewon iOS,TabsHoston Android) and tab screen (RNSBottomTabsScreenComponentViewon iOS,TabScreenon Android).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
systemBackgroundColorand 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
nativeContainerStyleprop toBottomTabscomponent withbackgroundColorfieldstyleprop toBottomTabsScreencomponent withbackgroundColorfieldTest3492Test code and steps to reproduce
Run
Test3492.Checklist