Core Components
Styled Native Keyboard Avoiding View

Styled Native Keyboard Avoiding View

This component is build on React Native Keyboard Avoiding View which is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.

Usage

App.tsx
import { StyledWindKeyboardAvoidingView } from "expo-nativewind-components";
 
export default function App() {
  return (
    <StyledWindKeyboardAvoidingView 
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    className=" flex-1 w-full justify-center items-center bg-fuchsia-500"
    >
      {/* Your content here */}
    </StyledWindKeyboardAvoidingView>
  );
}
package logo

Props Reference

You can find all the possible props that you can pass to the StyledWindKeyboardAvoidingView component below from the official React Native documentation (opens in a new tab).