How to fix KeyboardAvoidingView in React Native?

#reactnative

Hey 👋

Update: 8th April 2020

If you are using React navigation V5 then use

import { HeaderHeightContext } from "@react-navigation/stack";
<HeaderHeightContext.Consumer>
  {headerHeight => (
     <KeyboardAvoidingView
    {...(Platform.OS === "ios" ? { behavior: "padding" } : {})}
     // you might need sometimes👇
    contentContainerStyle={{flex: 1}}
    // chances are you might be using react-navigation
    // if so 👇
    keyboardVerticalOffset={headerHeight + 64}
    // You can import Header Component from react-navigation and it has height attached to it
    // 64 is some extra padding, I feel good, feel free to tweak it
>
    {children}
</KeyboardAvoidingView>
   )}
</HeaderHeightContext.Consumer>

End of update

Here's how I use KeyboardAvoidingView, this will be the root component for the screen

<KeyboardAvoidingView
    {...(Platform.OS === "ios" ? { behavior: "padding" } : {})}
     // you might need sometimes👇
    contentContainerStyle={{flex: 1}}
    // chances are you might be using react-navigation
    // if so 👇
    keyboardVerticalOffset={Header.HEIGHT + 64}
    // You can import Header Component from react-navigation and it has height attached to it
    // 64 is some extra padding, I feel good, feel free to tweak it
>
    {children}
</KeyboardAvoidingView>

If you are still facing problems, try to understand where KeyboardAvoidingView Component is from top of the screen and then adjust keyboardVerticalOffset based on that. That's the key to fix it

Top comments (4)

Abe Dolinger • Mar 16 '21 • Edited

instead of
{...(Platform.OS === "ios" ? { behavior: "padding" } : {})}
I recommend
behavior={Platform.select({ ios: 'padding' })}
this will also evaluate to undefined on Android.