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.

1. Use KeyboardAvoidingView, set keyboardVerticalOffset to any value
2. 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>

[TeamDlxx]

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

this will fix your issue

[F3WS]

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>