KeyboardAvoidingView using multiple inputs

user_13505006 0
Viewed 253

I'm struggling to understand and fix a problem I've been having when trying to use KeyboardAvoidingView to wrap some text inputs.

To aid my question, I've made an MVCE: https://snack.expo.io/@lee12f/brave-peanut

Please run this using the IOS simulator (or on IOS device) to reproduce the problem.

Clicking between the TextInput components (and around the screen) causes the KeyboardAvoidingView to toggle thus changing my View height. What am I doing wrong? How can I ensure the KeyboardAvoidingView remains enabled when clicking between the inputs?

As a bonus, it would be nice when clicking anywhere other than the inputs for the keyboard to close.

Thanks in advance

EDIT: If possible, without using 3rd party libraries.

react-native reactjs
1 Answers

try using react-native-keyboard-aware-scroll-view way easier to setup and it performs better in opinion

  import {KeyboardAwareScrollView}  from 'react-native-keyboard-aware-scroll-view'
 
 <KeyboardAwareScrollView   contentContainerStyle={{ flex:1,display:'flex' }} >
    /... inputs here 
 </KeyboardAwareScrollView>
user_139993860
Related