translucent option has no effect for statusBar

[flexsurfer]

🐛 Bug Report

translucent option has no effect for statusBar in the latest release (7.25.0), probably after https://github.com/wix/react-native-navigation/pull/7343

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. set translucent to true for the statusBar
2. open the app

Expected behavior

statusBar is translucent

Actual Behavior

statusBar is not translucent

Your Environment

• React Native Navigation version: 7.25.0
• React Native version: 0.63.4
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator Debug

[flexsurfer]

cc @swabbass

[swabbass]

Thx for the report, where do you set this option, defaults? in the playground, it just works in Options->System Ui Is there a flow where it has no effect?

[flexsurfer]

@swabbass i set this option in Navigation.push and Navigation.showOverlay in both cases no effect

[flexsurfer]

just wondering in https://github.com/wix/react-native-navigation/pull/7343 demo, translucent set to true but when statusbar color is changed in the UI, status bar in the app also changes its color, but if it translucent it should ignore color right ? or i don't understand how translucent works ?

[flexsurfer]

in my case, i want to open an overlay with layout.componentBackgroundColor which has an alpha channel, so I can't just set this color to status bar, i want to make it translucent , and it worked fine before, but not for all Android devices , now it just has status bar color for all Android devices

[flexsurfer]

..............^ Expected result^ ...............................................................................................^ Actual result ^..............

[swabbass]

@flexsurfer, In the demo, changing colors will not affect translucency, since translucent means, making the status bar transparent in a way, like adding alpha channel with certain percentage to the current color.

For now until a fix is pushed, can you try passing a status bar background color with alpha like argb() or #F20FFF44 the 44 is hex value for alpha channel.

Also, no view can be present on top of the status bar, until a user permission issued (draw over) and agreed by the user like any other permission, so to overcome that you need to set status bar color to match overlay or background.

Would be nice to have simple project or in our playground (fork it)ake your case and share it so we can make things smoother and faster.

[flexsurfer]

thank you @swabbass , here is an example https://github.com/wix/react-native-navigation/pull/7421, so I'm trying to open overlay, and expect that statusbar will be same color, translucent, but its white

[enahum]

Not sure if this is also causing the following issue on Android:

• Open a modal with the following options

const defaultOptions = {
        modalPresentationStyle: 'overCurrentContext',
        layout: {
            backgroundColor: 'transparent',
            componentBackgroundColor: 'transparent',
        },
        topBar: {
            visible: false,
            height: 0,
        },
    };

The first time the modal is opened it is in fact transparent, then after the first dismissal, if the modal is opened again, the background color uses the same background color as the root screen.

[agestaun]

Any progress?