React Native keyboard pushes up modal on Android

Question

I have a very simple modal component with a TextInput inside and whenever I focus on the TextInput my whole View gets pushed up.

For smaller modals this is not a problem, however I have a few modals with bigger Height, where I have the TextInput at the very top, making my text dissapear above.

I am using expo.

Things I tried:

• Add expo/android/softwareKeyboardLayoutMode : "pan" to expo app.json
• Use KeyboardAvoidingView
• Use a 3rd party modal component react-native-modal

Code:

import React, { useState } from 'react';
import { View, Text, Button, KeyboardAvoidingView, StatusBar, Dimensions } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import Modal from 'react-native-modal';

const TestModal = ({ visible, onClose }) => {

const window = Dimensions.get('window');
const WINDOW_HEIGHT = window.height;

  return (
    <Modal animationType="fade" visible={visible} onRequestClose={onClose} avoidKeyboard={true} style={{ alignItems: 'center' }}>
      <View style={{ alignItems: 'center', backgroundColor: 'grey', width: 350, height: WINDOW_HEIGHT * 0.8, borderRadius: 10 }}>
        <Text>This is a modal</Text>

        <TextInput style={{ width: 100, height: 40, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
        <Button title="Close Modal" onPress={onClose} />
      </View>
    </Modal>
  );
};

export default TestModal;

Answer 1

The solution was to add the statusBarTranslucent={true} prop to the modal, so the keyboard is not pushing up the view.

I had use cases where the TextInput was on the bottom part of the modal, so I had to use react-native-keyboard-aware-scroll-view with the prop enableOnAndroid={true}, so it enables on android. (By default it is false...)

    <Modal
      ...
      statusBarTranslucent={true} 
    >
<KeyboardAwareScrollView enableOnAndroid={true}>{children}</KeyboardAwareScrollView>
   </Modal>

Answer 2

I see you have this on your modal

avoidKeyboard={true}

And this from the docs

avoidKeyboard   bool    Move the modal up if the keyboard is open

Try setting it to false.