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

Question

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

Answer 1

How about go now with react-native KeyboardAvoidingView (official docs)

import {KeyboardAvoidingView} from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
  ... your UI ...
</KeyboardAvoidingView>;

Tested on iOS, for me works fine out of the box. For android consider adding parameter: android:windowSoftInputMode="adjustResize" to your AndroidManifest.xml

Answer 2

I had the same problem, wanting to move content when the keyboard appears.

I solved it by using the last answer of a similar question:

How to auto-slide the window out from behind keyboard when TextInput has focus?

You basically use event listeners for the keyboard and adjust the content accordingly. Note however that the listeners differ between iOS and Android. Android only supports keyboardDidShow and keyboardDidHide while iOS also supports keyboardWillShow and keyboardWillHide.

Hope it helps!