Best order for KeyboardAvoidingView, SafeAreaView and ScrollView

Question

I use react native to create a mobile app. I handle keyboard position in my screens by using KeyboardAvoidingView, SafeAreaView and ScrollView. I use this order to manage Keyboard position :

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
        <SafeAreaView>
          <ScrollView>
            <Header
              leftComponent={{
                icon: "cancel",
                color: "#fff",
                size: 30,
                onPress: () => navigate("Dashboard")
              }}
              centerComponent={{ text: "Ajouter une demande", style: { color: "#fff", fontSize: 18 } }}
              rightComponent={{
                icon: "help",
                color: "#fff",
                size: 30,
                fontWeight: "bold",
                onPress: () => Alert.alert("En cours de développement")
              }}
              backgroundColor="rgba(82, 159, 197, 1)"
              // outerContainerStyles={{ height: Platform.OS === "ios" ? 70 : 70 - 24 }}
              containerStyle={
                {
                  // marginTop: Platform.OS === "ios" ? 0 : 15
                }
              }
            />
            <View>
              <Input placeholder="INPUT WITH CUSTOM ICON" leftIcon={<Icon name="user" size={24} color="black" />} />
            </View>
          </ScrollView>
        </SafeAreaView>
      </KeyboardAvoidingView>

My question is : what's the best order to use those 3 components to avoid a best keyboard position

score 5 · Accepted Answer · answered Sep 26 '19 at 14:41

5

SafeAreaView only works with iOS. Therefore, it is assumed that you use the iOS. If your project is iOS, you can use KeyboardAwareScrollView.

SafeAreaView should be at the top because it covers the area of the screen.

KeyboardAwareScrollView Example

Usage

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
...
<SafeAreaView>
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>
</SafeAreaView>

answered Sep 26 '19 at 14:41

hong developer

13,291
4
38
68

Hello, you recommend to use this librairie instead of the native KeyboardAvoidingView component ? – Khaled Boussoffara Sep 26 '19 at 14:45
Yes, @KhaledIf if you create the iOS project, you can work much more comfortably. – hong developer Sep 26 '19 at 14:49

Dylan w · Answer 2 · 2020-11-22T08:20:13.030

Here is a re-usable component example without library and includes KeyboardAvoidingView, SafeAreaView and ScrollView. It also makes scrollview expand to full height.

import { KeyboardAvoidingView, SafeAreaView, ScrollView } from 'react-native';
import React from 'react';

const ScreenContainer = props => {
  const { children } = props;
  return (
    <SafeAreaView style={ { flex: 1 } }>
      <KeyboardAvoidingView
        behavior={ Platform.OS === 'ios' ? 'padding' : 'height' }
        style={ { flex: 1 } }
      >
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          keyboardShouldPersistTaps="handled"
        >
          { children }
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

export default ScreenContainer;

I mapped an array of 20 TextInputs inside of children in your example and it didn't work. The scroll doesn't go below actual input I clicked on. — denistepp, Jul 21 '21 at 15:56

score 0 · Answer 3 · answered Oct 10 '20 at 12:15

Here is an another solution without the need of an external library such as react-native-keyboard-aware-scroll-view.

I made a ScreenWrapper component to handle the IOs issue:

import React, { ReactElement } from 'react';
import {
  KeyboardAvoidingView, Platform,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

const ScreenWrapper = ({ children }: Props): ReactElement => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {
        Platform.OS === 'ios'
          ? (
            <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
              {children}
            </KeyboardAvoidingView>
          )
          : (
            <>
              {children}
            </>
          )
      }
    </SafeAreaView>
  );
};

export default ScreenWrapper;

As Android looks to make the things greatly without the KeyboardAvoidingView, I decided to use it only for IOs, it's simpler to manage.

I use the padding because it fits my need but you may want to change it.

I recommend to read this excellent blog post for more information. I created this wrapper thanks to it.

I mapped an array of 20 `TextInput`s inside of `children` in your example and it didn't work. The scroll doesn't go below actual input I clicked on. — denistepp, Jul 21 '21 at 15:56

Best order for KeyboardAvoidingView, SafeAreaView and ScrollView

3 Answers3