KeyboardAvoidingView mistakingly adds white space on screen bottom after being untangled

[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® Core™ 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>

Artboard

Issue Analytics

State:
Created 3 years ago
Reactions:20
Comments:19

Top GitHub Comments

11reactions

TeamDlxxcommented, Jun 7, 2022

behavior={Platform.OS === ‘ios’ ? ‘padding’ : ‘height’} keyboardVerticalOffset={-900}

this will fix your issue

3reactions

F3WScommented, Aug 11, 2021

Here’s my solution, I can’t promise it will work for everyone and in all situations but it’s working where it needs to in my current project, it involves replacing ‘flex: 1’ with the window height minus the status bar height and setting the behavior to position. Hope it helps.

<KeyboardAvoidingView
        behavior="position"
        style={{
          height: Platform.OS === 'android' ? Dimensions.get('window').height - StatusBar.currentHeight : '100%',
          alignItems: 'center',
        }}
      >
....
</KeyboardAvoidingView>

Top Results From Across the Web

How do fix the white keyboard space that shows whenever I ...

I am using Expo - react-native in creating an app, but using KeyboardAvoidingView and other Keyboard Packages (react ...

KeyboardAvoidingView - React Native

This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the ...

React Native Android Keyboard Empty Space - ADocLib

KeyboardAvoidingView leaves space on bottom of screen when the keyboard runandroid; Open and close the keyboard; Observe the whitespace on the Android and ......

Avoid Keyboard in React Native Like a Pro - Netguru

In KeyboardAvoidingView screen, after opening the bottom sheet and focusing input, content is not changing its position, which makes it covered ...

KeyboardAvoidingView not working properly? Check your ...

Check your Flexbox Layout first. Keyboard overlaying Input or Submit button is a common problem in React Native. Something like ...