CODEWITHSUNDEEP
react-nativekeyboardexpo
Arnaud
Arnaud

Reputation: 5112

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

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

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?

Upvotes: 34

Views: 33293

Answers (5)

Johnathan Simeroth
Johnathan Simeroth

Reputation: 51

As an alternative approach, OP actually could use https://github.com/APSL/react-native-keyboard-aware-scroll-view . The changes to android mainfest can be made via the expo app.json file, as shown below:

"expo": {
  "android": {
    "softwareKeyboardLayoutMode": "pan",
  },
}

Note that you'll have to re-build the app for the change to take effect. Not sure when this capability was added to expo, but hopefully this helps some modern expo users out there!

PS: This change also helps solve an issue where bottom navigation tabs stay on top of the keyboard, so there's a side benefit too if you're using bottom tabs.

Upvotes: 0

Kranthi
Kranthi

Reputation: 1070

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

Upvotes: 20

Steven Koch
Steven Koch

Reputation: 797

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

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

Upvotes: 15

Idan
Idan

Reputation: 4023

I don't understand the problem with KeyboardAvoidingView

it's work for me with:

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

Upvotes: -3

Gaspar Teixeira
Gaspar Teixeira

Reputation: 1267

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!

Upvotes: 3

Related Questions