⌨️ KeyboardAvoidingView

? Quick Overview

KeyboardAvoidingView is a built-in React Native component used to automatically adjust the layout when the on-screen keyboard appears. It prevents important UI elements like TextInput and buttons from being hidden by the keyboard, especially on mobile devices.

? Key Concepts

• Automatically moves UI when keyboard opens
• Works differently on iOS and Android
• Commonly wraps forms and input screens
• Uses behavior prop to control movement

? Syntax / Theory

KeyboardAvoidingView adjusts its children based on keyboard visibility. The behavior prop defines how the view responds, such as shifting position, adding padding, or resizing height.

// Import KeyboardAvoidingView from react-native
import { KeyboardAvoidingView, Platform, TextInput, View } from "react-native";

export default function App() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{ flex: 1 }}
    >
      <View style={{ padding: 20 }}>
        <TextInput placeholder="Enter name" />
      </View>
    </KeyboardAvoidingView>
  );
}

?️ Live Output / Explanation

? Interactive Visualization

Use the simulator below to understand why KeyboardAvoidingView is necessary. Click the input field inside the phone to trigger the keyboard.

// Pseudo-layout representation for understanding behavior
[Screen]
[Input Field]
[Button]
------ Keyboard Appears ------
[Input Field]
[Button]
[Keyboard]

? Use Cases

• Login and signup screens
• Chat applications
• Forms with multiple inputs
• Payment and checkout pages