What is KeyboardAvoidingView?
Why Interviewers Ask This
This is a classic screening question for React Native roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
KeyboardAvoidingView automatically adjusts a view's position when the software keyboard appears, preventing the keyboard from covering important content like TextInputs. Basic usage: import { KeyboardAvoidingView, Platform } from "react-native"; function LoginScreen() { return ( <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"} > <ScrollView> <TextInput placeholder="Email" /> <TextInput placeholder="Password" secureTextEntry /> <Button title="Login" onPress={handleLogin} /> </ScrollView> </KeyboardAvoidingView> ); }. behavior prop: "padding" (iOS recommended) — adds padding to push content up; "height" (Android recommended) — reduces view height; "position" — translates the view upward. Different behaviors work better on different platforms — the Platform.OS check is standard practice. keyboardVerticalOffset: additional offset to account for headers: keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}. Alternatives and improvements: wrapping content in ScrollView often works better. The react-native-keyboard-aware-scroll-view library provides a more robust solution that automatically scrolls to the focused TextInput. For complex forms, it's often the better choice. Expo: KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view is commonly used in Expo projects for reliable keyboard handling across both platforms.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex React Native answers easy to follow.
Previous
How does state management work in React Native?
Next
What is the difference between paddingHorizontal/paddingVertical and paddingTop/Left/Right/Bottom?