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>

Answer 2

There is a good lib that resolves this problem react-native-keyboard-aware-scroll-view

yarn add react-native-keyboard-aware-scroll-view

The component auto-scroll to focused text input!

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>