react-native-keyboard-controller: KeyboardProvider breaks translucent StatusBar on Android
Describe the bug
My StatusBar is translucent in my android app. As soon as I add KeyboardProvider, it reverts that and leaves a white StatusBar which is not covering the app anymore.
Code snippet
Wrap the app with <KeyboardProvider>
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 26 (24 by maintainers)
Commits related to this issue
- issue #14: fix translucent status bar on Android — committed to kirillzyusko/react-native-keyboard-controller by kirillzyusko 2 years ago
- issue #14: translucent status bar on android (#15) * issue #14: fix translucent status bar on Android * bugfix: better type match * fix: provide a single child to compile without errors * do... — committed to kirillzyusko/react-native-keyboard-controller by kirillzyusko 2 years ago
@hirbod I could reproduce the issue on my Xiaomi device. Using version from PR and adding
statusBarTranslucentto Provider fixes the problem đ Could you check it, please? If you confirm it, then I will merge and publish a new version of the library.I also created a PR here to circumvent the issue in the future with an easy
statusBarTranslucentprop: https://github.com/react-navigation/react-navigation/pull/10578A lot. Expo got just beautiful, specially since custom code is possible in a semi-managed workflow - which is just great. I found out that
react-native-screenshas a propstatusBarTranslucentwhich does work with your KeyboardProvider, unfortunately it still has not been ported to react-navigation/native-stack.I asked satya164 if anything speaks agains porting it. But would still be nice to workaround this anyway.
With KeyboardProvider
Without KeyboardProvider
@hirbod nice, but anyway Iâll try to figure out as well whatâs breaking status bar behaviour in my code đ Thanks for the repo again!
@kirillzyusko here is the mcve.
https://github.com/hirbod/keyboard-controller-statusbar-issue-repro
I could reproduce the issue. It only happens with @react-navigation/native-stack and react-native-screens
You donât need to âejectâ (aka going bare). But you will need to install
expo-dev-clientand generate a custom dev client with EAS or Xcode/Android Studio, but you can also build in the cloud for free with EAS. No config plugins are required.You just canât use Expo Go, because for that, the native code by this library has to be included, which Expo wonât do anymore, since custom dev clients are very easy to setup and super convenient (+ 50% smaller app size)
This is kind of âsemi managedâ, but upgrading RN etc is so easy with Expo.
@hirbod side question - do you have steps on how you installed this lib into expo? did you write a config plugin for it?
another side note, thanks @kirillzyusko for hitting the problem of no willShow events on android!!