KeyboardAvoidingView is not working correctly when used inside a Modal with presentationStyle pageSheet

[adamivancza]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

KeyboardAvoidingView is not working correctly when used inside a Modal with presentationStyle pageSheet.

Modal with presentationStyle fullScreen (this is the correct behaviour):

Modal with presentationStyle pageSheet:

React Native version:

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-3740QM CPU @ 2.70GHz
    Memory: 53.15 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v11.15.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /Users/roosevelt/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 19, 22, 23, 24, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.2, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3, 29.0.2
      System Images: android-21 | Google APIs Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 20.1.5948944
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_131 - /usr/bin/javac
    Python: 2.7.13 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.0 => 0.63.0 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Modal,
  KeyboardAvoidingView,
  TextInput,
  View,
  Button,
} from 'react-native';

class App extends React.PureComponent {
  state = {
    modalOpen: false,
    presentationStyle: 'pageSheet',
  };

  openPageSheetModal = () => {
    this.setState({modalOpen: true, presentationStyle: 'pageSheet'});
  };

  openFullScreenModal = () => {
    this.setState({modalOpen: true, presentationStyle: 'fullScreen'});
  };

  closeModal = () => {
    this.setState({modalOpen: false});
  };

  render() {
    const {modalOpen, presentationStyle} = this.state;
    return (
      <>
        <SafeAreaView>
          <Button
            title="Press to open Modal with presentationStyle pageSheet"
            onPress={this.openPageSheetModal}
          />
          <Button
            title="Press to open Modal with presentationStyle fullScreen"
            onPress={this.openFullScreenModal}
          />
        </SafeAreaView>
        <Modal visible={modalOpen} presentationStyle={presentationStyle}>
          <SafeAreaView style={styles.fill}>
            <KeyboardAvoidingView style={styles.fill} behavior="padding">
              <TextInput
                style={styles.textInput}
                placeholder="Tap to open keyboard"
              />
              <View style={styles.fill} />
              <Button title="Close Modal" onPress={this.closeModal} />
            </KeyboardAvoidingView>
          </SafeAreaView>
        </Modal>
      </>
    );
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1,
  },
  textInput: {
    backgroundColor: 'aqua',
  },
});

export default App;

Expected Results

KeyboardAvoidingView should work the same way in Modal using presentationStyle pageSheet as in every other place.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/W1VFchQX5

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[adamivancza]

This is still an issue

[ghost]

I'm looking for a solution for this as well...

[ghost]

I'm looking for a solution for this as well...

Actually I just figured out that my very similar issue was due to having the KeyboardAvoidView wrapped in ActionSheetProvider from @expo/react-native-action-sheet. Taking that away fixed the keyboard padding behaviour.

[xmflsct]

modal also doesn't work for me. fullScreenModal dismissing the keyboard and show the keyboard again, it also doesn't work.

[burabure]

found a fix: You'll need to set keyboardVerticalOffset. it seems that the KeyboardAvoidingView gets confused when there's a Modal open

[aaronksaunders]

found a fix: You'll need to set keyboardVerticalOffset. it seems that the KeyboardAvoidingView gets confused when there's a Modal open

@burabure - please explain more... having issue with modal also

[lasharela]

Yes, this is weird, but the issue is still not closed.

[lopermo]

Still an issue...

[ol4juwon]

still an issue

[pierregambaud]

found a fix: You'll need to set keyboardVerticalOffset. it seems that the KeyboardAvoidingView gets confused when there's a Modal open

@burabure - please explain more... having issue with modal also

I think @burabure is referring to this specific fix using keyboardVerticalOffset on KeyboardAvoidingView. Another workaround could also be this other fix, where you adjust flex style.

[spencervbishop-dr]

I had this issue too, and the keyboardVerticalOffset workaround worked for me, thanks!

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.