Scroll through the view when keyboard is open (React Native / Expo)

Question

I am having a hard time using a KeyboardAvoidingView on my Expo app. I would like to meet the following requirements:

• When the keyboard opens, the view should scroll up so that the user always sees the input. That is the purpose of KeyboardAvoidingView.
• The user should be able to scroll through the entire view when keyboard is open.
• There shouldn't be any bizarre graphic glitch.
• It should work on iOS and Android.

I tried 100 different solutions and I couldn't get a satisfying result. As I use Expo, I have not been able to use https://github.com/APSL/react-native-keyboard-aware-scroll-view as it requires to make changes to the AndroidManifest.

Using KeyboardAvoidingView, I found that the best solution is to put behavior = "padding" on iOS, and no behavior at all on Android. However, there is still a problem: the space that the user can scroll through is limited when the keyboard is open. Hence, when a view is a long form with lots of inputs, the user cannot go to the bottom of the form without closing the keyboard, scrolling, and then opening the keyboard again.

I also have the problem that the keyboard opens just right after the input that is focused, but I would like to leave some extra space because my inputs have some padding. Using the keyboardVerticalOffset property has no effect on this.

After reading dozens of posts about the topic, it seems that nobody really understands how KeyboardAvoidingViews work and how to use them effectively. Even on the official React Native docs, it is mentionned that "Android and iOS both interact with this prop [(behavior)] differently. Android may behave better when given no behavior prop at all, whereas iOS is the opposite", like they don't really understand what is this property.

Is there someone who have understood how to use KeyboardAvoidingView and how to use it so that the 4 requirements are satisfied?

Answer 1

We are using this to update the AndroidManifest and React Native file.

AndroidManifest.xml

<activity
  .....
  android:windowSoftInputMode="adjustPan">
  .....
</activity>

in your React Native file.

<KeyboardAwareScrollView keyboardShouldPersistTaps={Platform.OS =='android' ? "handled": "always"}
   style={{flex:1}}
   showsVerticalScrollIndicator={false}>
   {/* Your code goes here*/}
</KeyboardAwareScrollView>

and we didn't face any of the four issues

Answer 2

In IOS I don't need KeyboardAvoidingView, I just use automaticallyAdjustKeyboardInsets

<ScrollView
      automaticallyAdjustKeyboardInsets={true}
      contentContainerStyle={{
        flex: 1
      }}
    >
...
</ScrollView>

Answer 3

Have you tried KeyboardSpacer from react-native-keyboard-spacer? I use it with react-native-elements and it works perfect! The only thing you have to be careful is when you want to use a scrollview. Just be sure that you place the outside that!

Answer 4

I don't understand the problem with KeyboardAvoidingView

it's work for me with:

<KeyboardAvoidingView style={{flex:1}} behavior="padding" enabled>
  your ui ....
</KeyboardAvoidingView>