The status bar and navigation bar become default colours after lib is added

[supoved]

The lib works beautiful and all KAV issues have been resolved by it.

But when testing on android I have noticed an issue. Status bar and navigation bar have reverted colours back to defaults, instead of values provided by app (see screebshot, they were matching background colour before)
This only broken for Android and works fine in iOS.

We use expo-router to provide status bar and navigation bar customisation, and if I force showing status bar on every screen, I can see it attempting to set correct colours and then falling back to black and white.

I have tried setting navigationBarTranslucent and statusBarTranslucent but I dont see any difference.

Any ideas how to resolve this?

[kirillzyusko]

@supoved could you please attach a screenshot how it looked before?

Basically you can not use default StatusBar API from RN, because it will break edge-to-edge mode. And this library monkey-patches default StatusBar API to deliver seamless integration.

But if you are using different StatusBar management (react-native-screens for example), then in some circumstances it can lead to unpredictable behavior.

If you can create small reproducible example - I can try to understand what is going wrong. But without any additional information it's hard for me to say what breaks your app 😔

[supoved]

@kirillzyusko
here is small app that reproduces the issue https://github.com/supoved/expo-status-bar-issue

as far as I can say the conflict happens explicitly between RN status bar or expo-status-bar (a simple wrapper around it) and react-native-keyboard-controller

when issue happens nav bar also start to behave strange and dropping colours to defaults.

Working:
https://github.com/kirillzyusko/react-native-keyboard-controller/assets/6122489/7631a4f7-6e49-46af-967f-03b4d1f47a1b

Broken:
https://github.com/kirillzyusko/react-native-keyboard-controller/assets/6122489/e6801fad-39c9-41fa-957c-aafb5a42fc36

[kirillzyusko]

Nice @supoved

I will transfer this discussion to issues if you don't mind, because for me it seems like a bug 🐛

I will have a look on the issue a little bit later (currently don't have an access to laptop, but after 2 days I'll definitely check the problem)

One more thing - which Android OS version are you testing?

[supoved]

Android 13, sry didnt try on any lower one

[supoved]

It looks like a bug, just wanted to make sure as I no one mentioned this issue before.

I have spent more time playing with it in production app and behaviour on it worse than what you can see in demo app.

Pretty much expo-router reconfigures normal status bar into custom translucent status bar, regardless of your app initial settings. Than expo-status bar or other api can be used to set it to whatever.

It seems that using this library makes status bar go to "package" defaults, after navigating to another screen expo-router attempts to overwrite it with translucent. So 3 things are happening with race condition: expo.router, expo.statusbar and keyboardcontroller and depending on trigger and speed it end up in random or combined state.

The issue with navbar is similar, but much less visible.

I have to timebox investigation, but I hope it will help you to track it down.

[kirillzyusko]

@supoved what this library does - it simply uses new API for StatusBar management: https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/android/src/main/java/com/reactnativekeyboardcontroller/modules/StatusBarManagerCompatModuleImpl.kt

And later in JS code it overrides RN StatusBar management with own module: https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/src/monkey-patch.ts As far as I know expo-status-bar uses default RN API, so there shouldn't be any problems 🤷‍♂️

I haven't tried your repo, since I simply didn't have time for that 😔 But I promise I'll have a look!

From what I've seen - expo-router depends on native-stack which comes from react-native-screens, but I don't think this package has any conflicts with react-native-screens (at least for methods that don't rely on translucency management, because I didn't figure out how to rewrite this method in RNS).

[kirillzyusko]

I'm closing this discussion, since we have a separate issue #177