Keyboard and Modal with React native (UI Kitten)

Question

I have one model with textinput inside, but, my keyboard overlap this field.
I tried to use KeyboardAvoidingView, but did not work.

Can someone help me please?

Answer 1

Detect the keyboard height and move the modal that exact value:

This is the useEffect that I used in order to get the keyboard height every time the keyboard appeared or disappeared:

const [keyboardSize, setKeyboardSize] = React.useState(0);

useEffect(() => {
    Keyboard.addListener("keyboardDidShow", (e) => {
        setKeyboardSize(e.endCoordinates.height)
    })

    Keyboard.addListener("keyboardDidHide", (e) => {
        setKeyboardSize(e.endCoordinates.height)
    })

    return (() => {
        Keyboard.removeAllListeners("keyboardDidShow");
        Keyboard.removeAllListeners("keyboardDidHide");
    })
}, [])

And this is the modal and card with the style:

<Modal
     visible={addUserModal}
     backdropStyle={styles.backdrop}
     style={styles.modal}
     onBackdropPress={() => setAddUserModal(false)}>
     <Card style={{ marginBottom: keyboardSize }} disabled={true}>
         <AddUser finished={() => { setAddUserModal(false) }}></AddUser>
     </Card>
</Modal>