KeyboardAvoidingView Android white area when keyboard open/close
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
When using KeyboardAvoidingView on android, whatever the configuration I use for the behavior or the keyboardVerticalOffset I always have a white area when the keyboard is opening or closing while on iOS everything is moving smoothly.
In the video, we can see that when the keyboard opens there is a big white area and when closing sometimes a small white rectangle with some flickering. I'm wondering if this is normal behavior because on iOS it transitions smoothly
I tried modifying android manifest with android:windowSoftInputMode="adjustResize" or android:windowSoftInputMode="adjustPan" but the problem is still there with both config.
It would actually be ok if we could change this color from white to something else like the background color of the content (red in my example). But I couldn't find a way.
Version
0.66
Output of react-native info
It happens from the documentation snack so I guess this section is not necessary
Steps to reproduce
Take the example from the KeyboardAvoidingView of react-native documentation and modify the background color of the container from white to red in order to see the white area when opening/closing the keyboard.
Snack, code example, screenshot, or link to a repository
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the documentation KeyboardAvoidingView example on Android, using the linked Snack and testing the reported behavior and keyboardVerticalOffset settings. Compare adjustResize and adjustPan while observing the white area and flickering; done should mean the reported transition behavior is resolved or the supported way to control the area’s color is clearly established.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100