KeyboardAvoidingView mistakingly adds white space on screen bottom after being untangled
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
[Description]
I wrapped a view as a footer inside KeyboardAvoidingView. It works properly before the keyboard has been untoggled. However, after the keyboard is untoggled, it adds a white space on the bottom of the screen. The height of the white space is as big as the keyboardVerticalOffset. This white space shouldn't exist.
React Native version:
System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Memory: 28.43 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.1 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.5 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 14.0.1 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ~16.11.0 => 16.11.0
react-native: https://github.com/expo/react-native/archive/sdk-38.0.1.tar.gz => 0.62.2
npmGlobalPackages:
react-native: Not Found
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
- Use KeyboardAvoidingView, set keyboardVerticalOffset to any value
- Put a view inside KeyboardAvoidingView, set the position as absolute, and set the bottom to 0
Expected Results
The white space for keyboardVerticalOffset should only exist when the keyboard is toggled.
Snack, code example, screenshot, or link to a repository:
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
keyboardVerticalOffset={48}
style={{width: "100%",
height: "100%",
position: "absolute",
zIndex: 1,}}
>
<View
style={{width: "100%",
position: "absolute",
height: 56,
bottom: 0,}}
>
<SubmitButton/>
</View>
</KeyboardAvoidingView>

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 provided KeyboardAvoidingView example on iOS with behavior set to padding or height and keyboardVerticalOffset set to 48. Inspect the KeyboardAvoidingView implementation and verify that the bottom space appears only while the keyboard is visible, then confirm the supplied absolute-positioned footer behaves correctly after dismissal.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100