Safe Areas and the Keyboard
Sprout's first screen looks fine in the simulator. On a real phone, the title hides behind the camera notch, and on the "Add plant" form the keyboard covers the Save button. Web pages rarely face either problem. Phones face both every day.
The rule
Pad for the notch; lift the form above the keyboard.
Safe areas. Phones have notches, rounded corners, status bars and home indicators. The safe area is the part of the screen nothing covers. Wrap each screen's content so it stays inside:
import { SafeAreaView } from 'react-native-safe-area-context';
export default function HomeScreen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text>My plants</Text>
</SafeAreaView>
);
}The react-native-safe-area-context library works on both iOS and Android and needs a SafeAreaProvider near the root of the app (Expo Router's template already includes it). For finer control, the useSafeAreaInsets() hook returns the exact padding for each edge. React Native's own built-in SafeAreaView only works on iOS and is deprecated, so prefer the library.
The keyboard. When a TextInput gets focus, the keyboard slides up over the bottom of the screen. KeyboardAvoidingView moves or shrinks its content to make room:
import { KeyboardAvoidingView, Platform } from 'react-native';
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
{/* name input, interval input, Save button */}
</KeyboardAvoidingView>behavior decides how it makes room: padding adds space at the bottom, height shrinks the view. iOS usually works best with padding. Android often resizes the window itself, which is why its setting differs. If a header sits above the form, keyboardVerticalOffset tells the view how much to allow for it.
The shortcut
Test every screen with the two-edge check: look at the top edge on a phone with a notch, then tap the lowest input and look at the bottom edge. Anything hidden fails.
Top edge
The title sits under the notch. Wrap the screen in
SafeAreaView.
The trap is forgetting flex: 1. Without it the wrapper is only as tall as its content, and there is nothing to adjust.
Drills
Answer fast — trust the rule.
What is the safe area?
Why prefer SafeAreaView from react-native-safe-area-context over the built-in one?
Which component helps keep a form's Save button visible when the keyboard opens?
A KeyboardAvoidingView seems to do nothing. What is the most likely missing piece?
Remember
- Pad for the notch with
SafeAreaView; lift forms withKeyboardAvoidingView. - Two-edge check: top edge under a notch, bottom edge with the keyboard open.
- Trap: a keyboard wrapper without
flex: 1has nothing to resize.