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