New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Incorrect KeyboardAvoidingView calculations on Android #334
Comments
Hello @joeporpeglia Thank you for your issue!
This is how original Let's consider a case when you have a view in the top part of the screen and keyboard appears (let's say that in this case only 10px of view will be obscured by keyboard). If you push the view to the entire keyboard height (let's say 336), then a significant part of the view will be obscured by window traits (i. e. status bar) 😓 So I think "relative keyboard height" is a preferred choice in this case. If you clone example app - does the problem happen as well? (If yes, then it explains why I've used |
Thank you for the explanation @kirillzyusko! I tweaked the example app to reproduce the issue and I can confirm that the bottom padding is inconsistent between android devices. See https://github.com/joeporpeglia/react-native-keyboard-controller/tree/keyboard-avoiding-view-repro (Changes to demonstrate the issue in this commit) |
@joeporpeglia and what is the output if you log a height from Also in your screenshots I see a difference in elements positioning:
Maybe you have some ideas how to fix this problem, by the way? I checked FB code - they are sending screen coordinates when keyboard is open/closed (but I thought it's an overkill because we can calculate in on JS). |
Using the following logs in
Device output:
Emulator output:
That gap to the left is due to the notch on my device, but you're right it does seem like the emulator uses a different system UI than the physical device.
I've been using a custom keyboard avoiding view that only uses the keyboard height as bottom padding. This fixes the issue because it avoids |
@joeporpeglia okay, I got you. I'll try to have a look into the issue when I get more free time 👀 One solution I was thinking of is the usage I need to play around with the example that you provided on my device to understand where the calculations are wrong and how to fix them 👍 |
@joeporpeglia As a potential workaround you can try to use In a meantime I'll think what is the best way to solve the problem 🤔 |
Hey @kirillzyusko, the custom On a related note, the |
KeyboardAvoidingView
relies onuseWindowDimensions
to calculate the bottom offset:react-native-keyboard-controller/src/components/KeyboardAvoidingView/index.tsx
Lines 69 to 78 in cb715fe
However,
useWindowDimensions
doesn't account for translucent system UI (e.g. status bar) on all devices/emulators (see discussion in facebook/react-native#33735).This causes inconsistent bottom offsets on certain android devices (I've observed this on a Pixel 5 device, but not on a Pixel 5 emulator). I've worked around this issue by implementing a simpler keyboard avoiding view that directly applies
useReanimatedKeyboardAnimation().height
as bottom padding to an animated view.Is there any reason to calculate the bottom offset as "relative keyboard height" instead of using the current keyboard height directly?
The text was updated successfully, but these errors were encountered: