search

kirillzyusko / react-native-keyboard-controller

Keyboard manager which works in identical way on both iOS and Android
https://kirillzyusko.github.io/react-native-keyboard-controller/
MIT License
1.61k stars 67 forks source link

Wrapping my App with <KeyboardProvider> adds space on top and bottom of the screen. #587

Open e-biba-ofti opened 1 week ago

e-biba-ofti commented 1 week ago

Describe the bug When wrapping my app with KeyboardProvider it adds space looks like it tries to do the same <SafeAreaView> does but I am already using <SafeAreaView> partially in my app as in some screens is not needed. If I just disable it <KeyboardProvider enabled={false}> then the app shows in full view.

Expected behavior The app should show in full screen

Screenshots image

Smartphone (please complete the following information):

kirillzyusko commented 1 week ago

@e-biba-ofti have you tried to specify statusBarTranslucent and navigationBarTranslucent props on KeyboardProvider level?

edisoni1995 commented 1 week ago

@kirillzyusko navigationBarTransparent seems to work fine but the statusBarTranslucent doesn't work. After checking it a bit more when I remove my status bar it works as expected or when I set my status bar as translucent it's working. But I don't want my status bar to be translucent as the content will be drawn under it.

kirillzyusko commented 1 week ago

@edisoni1995 when you wrap app in KeyboardProvider it will move to edge-to-edge mode and app will be drawn under status bar. Since edge-to-edge is not a default mode for RN app the KeyboardProvider will try to match default RN behavior and add paddings.

On your screenshot these white paddings most likely are caused by this fact (i. e. it's paddings from KeyboardProvider and for me it looks like you already handle safe-area paddings somewhere in your code). To remove these padding you will need to add navigationBarTranslucent and statusBarTranslucent props.

statusBarTranslucent doesn't work in your case because you are using StatusBar component and translucent is false by default, so you overwrite an initial config of KeyboardProvider and you are adding white padding again.

I think in your case it'll be safe to add translucent property to StatusBar - in this case it shouldn't draw anything under StatusBar because react-native-keyboard-controller uses its own implementation (this implementation is compatible with edge-to-edge mode, unlike RN component) of StatusBar and it becomes to be used automatically when you use KeyboardProvider.

Can you share here two screenshots side by side:

In my understanding these screenshots should be identical.

e-biba-ofti commented 1 week ago

Here you have it, I made a red border just to be able to tell that some part of the content is going under the status bar. The image on the right is the one with <StatusBar translucent /> and with translucent props for KeyboardProvider.

image image

kirillzyusko commented 1 week ago

@e-biba-ofti would you be able to provide a minimal reproduction example?

Something is definetely going wrong here, but without a code I can not say what exactly 😔

Would you be able also to try to comment out this line:

https://github.com/kirillzyusko/react-native-keyboard-controller/blob/7c9c450984161dcb76858184fcb2d249b4dcf8f4/android/src/main/java/com/reactnativekeyboardcontroller/modules/StatusBarManagerCompatModuleImpl.kt#L58

And re-run app again?

e-biba-ofti commented 1 week ago

@kirillzyusko that would be very difficult to create for now but I will try to find a minimal reproducable example. I did the change in the android file and re-build android but nothing changed.

kirillzyusko commented 1 week ago

@e-biba-ofti got you! Then minimal reproduction example is highly appreciate - it can significantly reduce the time needed for fixing this problem! ❤️

RayKay91 commented 4 days ago

The issue will be resolved soon - it's been merged to react-native-screens but is yet unreleased. I posted this in another issue:

https://github.com/kirillzyusko/react-native-keyboard-controller/issues/592#issuecomment-2370922343

kirillzyusko commented 4 days ago

@RayKay91 oh, yeah, you are right, good catch! @e-biba-ofti did you use native-stack with navigationBar* options by any chance? If yes, then what is the version of react-native-screens did you use?