Setting navigation bar color turns status bar and navigation bar translucent

[LukaRusadze]

Description

Steps To Reproduce

1. set navigationBarColor to any color on native stack navigator

Expected behavior

navigationBarColor being set shouldn't render the application behind status bar and navigation bar

Actual behavior

Currently, setting navigationBarColor turns status bar and navigation bar translucent even if you specify statusBarTranslucent: false prop

Platform

• [ ] iOS
• [X] Android
• [ ] Web
• [ ] Windows
• [ ] tvOS

Architecture

• [X] Paper
• [ ] Fabric

Workflow

• [ ] Managed workflow
• [X] Bare workflow

Package versions

package	version
react-native	0.68.2
@react-navigation/native	6.0.11
@react-navigation/native-stack	6.7.0
react-native-screens	3.15.0
react-native-safe-area-context	4.3.1

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Reproduction and Description sections.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snippet of code, a snack or a link to a GitHub repository that reproduces the problem?

[kkafar]

Hi @LukaRusadze, it seems to be working fine for me or I do not really understand the issue. Would be great if you provided us with more detailed description & recording / screenshots.

https://user-images.githubusercontent.com/50801299/181272166-8233b9f5-b694-4c7c-a487-f2745171bf09.mov

[BlueBazze]

@kkafar Not sure if it is intended. And not sure if theres a closed issue, or if it has been fixed yet. When setting the navigationBar color. It seems that the screen content is being rendered behind the navigation bar. (The screen does not take account of the navigation bar) If using react-navigation. Navigation to a screen that has a navigation bar set for that screen it works. But when navigating to another screen, the color does not get reset, and content is still being rendered behind the navigation bar. You can see it in the video you displayed. You cant access the last few elements in the list.

The react-native-safe-area-context's safeAreaInsets hook still contains the inset of the navigation bar.

My thought: When the navigation bar is not hidden. The screen should have the padding of the navigation bar. Tho this might break some peoples use of this feature. This can easily be fixed by users of react-native-screens by simply setting the padding ourselves.