reactjsreact-nativereduxreact-router-reduxredux-form

How to move a view when the keyboard shows up in React Native?

When the TextInput is focus the keybord is hiding the submit buttom. How to auto-slide the components below the TextInput

Solution

  • I just wanted to add an answer after I solved my own problem. I found that <KeyboardAvoidingView> does not play nicely for whatever reason.

    You can also directly manipulate views using event listeners with the Keyboard class.

    Keyboard.addListener('keyboardDidShow', () => {
    // manipulate views in whatever way you need to
}
Keyboard.addListener('keyboardDidHide', () => {
    // manipulate views in whatever way you need to
}

    Worked very well for me on Android.