Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 6 · 6 / 10Safe areas and the keyboard
Phase 6React Native with Expo
10 topics · 6–8 wks
  1. 1Your first Expo app
  2. 2View, Text and Image
  3. 3Pressable and TextInput
  4. 4Styling and flexbox on mobile
  5. 5Lists with FlatList
  6. 6Safe areas and the keyboard
  7. 7Screens and navigation
  8. 8Tabs
  9. 9Saving data on the phone
  10. 10Calling an API
JourneyPhase 6Safe areas and the keyboard
01 / 09Overview

Safe areas and the keyboard

You'll learn to keep your screen clear of the notch, the status bar and the keyboard.

Why it mattersA title hidden under the clock, or an input hidden under the keyboard, makes an app feel broken on a real phone.
about 60 min·needs: Pressable and TextInput, Styling and flexbox on mobile
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Safe areasdocs.expo.dev · official docs · 10 min · English
MMamun's noteLook at the two screenshots at the top, with and without a safe area. Then read Usage with SafeAreaView. The useSafeAreaInsets hook is the other way to do it; you'll see it in other people's code, so read that part too.
Video
Keyboard handling tutorial for React Native appsYouTube · Expo · 10 min · English
MMamun's noteWatch 0:00–10:17: the demo of the keyboard covering an input, then KeyboardAvoidingView and its behavior prop on iPhone and Android. Stop at "Keyboard events". The rest uses an extra library you don't need yet.
DocsOptional
Keyboard handlingdocs.expo.dev · official docs · 5 min · English
MMamun's noteRead only "Keyboard avoiding view". It has the Platform.OS example and the fix for tabs being pushed up by the keyboard on Android, which you'll need once your habit tracker has tabs.
VideoOptional
Complete React Native tutorial #11: Safe Area ViewYouTube · Net Ninja · 7 min · English
MMamun's noteWatch 0:00–2:44 to see text slide under the camera and clock on a real phone. He first tries the SafeAreaView from react-native, which is now deprecated; use the one from react-native-safe-area-context instead. From 5:26 he uses its useSafeAreaInsets hook.
03 / 09

Explanation

A phone screen is not a clean rectangle. At the top there is the status bar with the clock and battery, and often a notch or camera hole. At the bottom there may be a home bar. Apps draw behind all of these, on iPhone and on new Android phones too. So a Text at the very top of your screen can end up under the clock.

Think of a wall poster with a light switch on it. You don't write over the switch; you leave a margin around it. The part of the screen nothing covers is the safe area.

import { SafeAreaView } from "react-native-safe-area-context";
 
<SafeAreaView style={{ flex: 1 }}>
  <Text>My habits</Text>
</SafeAreaView>

SafeAreaView is a normal View that adds just enough padding on each edge for this exact phone. Use the one from react-native-safe-area-context. React Native has an old SafeAreaView of its own, but it is deprecated and only worked on iPhone. New Expo projects with Expo Router already have the package. If you only want some edges, say which: edges={["top"]}.

You don't always need it. A screen with a Stack header already sits below the status bar, because the header handles the top. A tab bar handles the bottom. You need it on screens with no header, like your home screen inside tabs with headerShown: false.

The keyboard is the other thing that covers your screen. When someone taps a TextInput near the bottom, the keyboard slides up over it. KeyboardAvoidingView moves your content up out of the way:

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{ flex: 1 }}>

Platform.OS is "ios" or "android". The Expo docs use "padding" on iPhone and nothing on Android, where the system already moves the content for you. Try other values if your screen still gets covered.

People often check only the browser preview. A browser has no notch and no on-screen keyboard, so the problem never shows. Always open the screen in Expo Go on a real phone, and tap the input at the bottom.

When you read a screen, look at its outermost component: is it a SafeAreaView, or is there a header above it? If it has a TextInput near the bottom, look for a KeyboardAvoidingView.

Words to recognise
safe areaSafeAreaViewnotchKeyboardAvoidingViewPlatform.OS
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

src/app/add.jsx5 notes
1import { KeyboardAvoidingView, Platform, Text, TextInput } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
Mentor note · line 2
SafeAreaView comes from react-native-safe-area-context, not from react-native. The react-native one is deprecated.
3
4export default function AddHabitScreen() {
5 return (
<SafeAreaView style={{ flex: 1 }}>
7 <KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : undefined}
style={{ flex: 1, justifyContent: "space-between", padding: 16 }}
10 >
11 <Text style={{ fontSize: 28 }}>New habit</Text>
<TextInput placeholder="What will you do every day?" />
13 </KeyboardAvoidingView>
14 </SafeAreaView>
15 );
16}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1export default function App() {
2  return (
3    <View style={{ flex: 1, backgroundColor: "#0B0B0D" }}>
4      <Text style={{ color: "white", fontSize: 28 }}>My habits</Text>
5    </View>
6  );
7}
8// No header, no SafeAreaView. You open it in Expo Go
9// on an iPhone with a notch at the top.
What do you see on the phone?
DrillMake the add screen safe2 / 2
This add-a-habit screen uses plain Views. Open it in Expo Go on your phone (scan the QR code in Snack) and you'll see the problems. Fix them with SafeAreaView and KeyboardAvoidingView.
1import { StyleSheet, Text, TextInput, View } from "react-native";
2import { SafeAreaProvider } from "react-native-safe-area-context";
3 
4function AddHabitScreen() {
5  return (
6    <View style={styles.screen}>

Runs in the browser. Choose “My Device” in Snack to try it on your phone with Expo Go.

Working whenOn your phone, the title sits below the clock, not behind it. Swap the outer View for SafeAreaView from react-native-safe-area-context.When you tap the input, it moves up above the keyboard. Swap the inner View for a KeyboardAvoidingView with behavior set from Platform.OS.
Check each goal yourself, then mark it.
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which SafeAreaView should you use in a new Expo app?
  2. 2 / 3Your screen is inside a Stack and shows a header with a title. Does its content need a SafeAreaView at the top?
  3. 3 / 3A TextInput is at the bottom of the screen. What happens when you tap it, with no KeyboardAvoidingView?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Safe areas and the keyboard?

09 / 09

Done

You can now
Look at a screen's outer component and say whether its top and bottom are safe, and what happens when the keyboard opens.
Next: Screens and navigation Back to Phase 6
On this page
  1. 01Safe areas and the keyboard
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 6React Native with Expo
10 topics · 6–8 wks
  1. 1Your first Expo app
  2. 2View, Text and Image
  3. 3Pressable and TextInput
  4. 4Styling and flexbox on mobile
  5. 5Lists with FlatList
  6. 6Safe areas and the keyboard
  7. 7Screens and navigation
  8. 8Tabs
  9. 9Saving data on the phone
  10. 10Calling an API
JourneyPhase 6Safe areas and the keyboard
01 / 09Overview

Safe areas and the keyboard

You'll learn to keep your screen clear of the notch, the status bar and the keyboard.

Why it mattersA title hidden under the clock, or an input hidden under the keyboard, makes an app feel broken on a real phone.
about 60 min·needs: Pressable and TextInput, Styling and flexbox on mobile
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Safe areasdocs.expo.dev · official docs · 10 min · English
MMamun's noteLook at the two screenshots at the top, with and without a safe area. Then read Usage with SafeAreaView. The useSafeAreaInsets hook is the other way to do it; you'll see it in other people's code, so read that part too.
Video
Keyboard handling tutorial for React Native appsYouTube · Expo · 10 min · English
MMamun's noteWatch 0:00–10:17: the demo of the keyboard covering an input, then KeyboardAvoidingView and its behavior prop on iPhone and Android. Stop at "Keyboard events". The rest uses an extra library you don't need yet.
DocsOptional
Keyboard handlingdocs.expo.dev · official docs · 5 min · English
MMamun's noteRead only "Keyboard avoiding view". It has the Platform.OS example and the fix for tabs being pushed up by the keyboard on Android, which you'll need once your habit tracker has tabs.
VideoOptional
Complete React Native tutorial #11: Safe Area ViewYouTube · Net Ninja · 7 min · English
MMamun's noteWatch 0:00–2:44 to see text slide under the camera and clock on a real phone. He first tries the SafeAreaView from react-native, which is now deprecated; use the one from react-native-safe-area-context instead. From 5:26 he uses its useSafeAreaInsets hook.
03 / 09

Explanation

A phone screen is not a clean rectangle. At the top there is the status bar with the clock and battery, and often a notch or camera hole. At the bottom there may be a home bar. Apps draw behind all of these, on iPhone and on new Android phones too. So a Text at the very top of your screen can end up under the clock.

Think of a wall poster with a light switch on it. You don't write over the switch; you leave a margin around it. The part of the screen nothing covers is the safe area.

import { SafeAreaView } from "react-native-safe-area-context";
 
<SafeAreaView style={{ flex: 1 }}>
  <Text>My habits</Text>
</SafeAreaView>

SafeAreaView is a normal View that adds just enough padding on each edge for this exact phone. Use the one from react-native-safe-area-context. React Native has an old SafeAreaView of its own, but it is deprecated and only worked on iPhone. New Expo projects with Expo Router already have the package. If you only want some edges, say which: edges={["top"]}.

You don't always need it. A screen with a Stack header already sits below the status bar, because the header handles the top. A tab bar handles the bottom. You need it on screens with no header, like your home screen inside tabs with headerShown: false.

The keyboard is the other thing that covers your screen. When someone taps a TextInput near the bottom, the keyboard slides up over it. KeyboardAvoidingView moves your content up out of the way:

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{ flex: 1 }}>

Platform.OS is "ios" or "android". The Expo docs use "padding" on iPhone and nothing on Android, where the system already moves the content for you. Try other values if your screen still gets covered.

People often check only the browser preview. A browser has no notch and no on-screen keyboard, so the problem never shows. Always open the screen in Expo Go on a real phone, and tap the input at the bottom.

When you read a screen, look at its outermost component: is it a SafeAreaView, or is there a header above it? If it has a TextInput near the bottom, look for a KeyboardAvoidingView.

Words to recognise
safe areaSafeAreaViewnotchKeyboardAvoidingViewPlatform.OS
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

src/app/add.jsx5 notes
1import { KeyboardAvoidingView, Platform, Text, TextInput } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
Mentor note · line 2
SafeAreaView comes from react-native-safe-area-context, not from react-native. The react-native one is deprecated.
3
4export default function AddHabitScreen() {
5 return (
<SafeAreaView style={{ flex: 1 }}>
7 <KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : undefined}
style={{ flex: 1, justifyContent: "space-between", padding: 16 }}
10 >
11 <Text style={{ fontSize: 28 }}>New habit</Text>
<TextInput placeholder="What will you do every day?" />
13 </KeyboardAvoidingView>
14 </SafeAreaView>
15 );
16}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1export default function App() {
2  return (
3    <View style={{ flex: 1, backgroundColor: "#0B0B0D" }}>
4      <Text style={{ color: "white", fontSize: 28 }}>My habits</Text>
5    </View>
6  );
7}
8// No header, no SafeAreaView. You open it in Expo Go
9// on an iPhone with a notch at the top.
What do you see on the phone?
DrillMake the add screen safe2 / 2
This add-a-habit screen uses plain Views. Open it in Expo Go on your phone (scan the QR code in Snack) and you'll see the problems. Fix them with SafeAreaView and KeyboardAvoidingView.
1import { StyleSheet, Text, TextInput, View } from "react-native";
2import { SafeAreaProvider } from "react-native-safe-area-context";
3 
4function AddHabitScreen() {
5  return (
6    <View style={styles.screen}>

Runs in the browser. Choose “My Device” in Snack to try it on your phone with Expo Go.

Working whenOn your phone, the title sits below the clock, not behind it. Swap the outer View for SafeAreaView from react-native-safe-area-context.When you tap the input, it moves up above the keyboard. Swap the inner View for a KeyboardAvoidingView with behavior set from Platform.OS.
Check each goal yourself, then mark it.
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which SafeAreaView should you use in a new Expo app?
  2. 2 / 3Your screen is inside a Stack and shows a header with a title. Does its content need a SafeAreaView at the top?
  3. 3 / 3A TextInput is at the bottom of the screen. What happens when you tap it, with no KeyboardAvoidingView?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Safe areas and the keyboard?

09 / 09

Done

You can now
Look at a screen's outer component and say whether its top and bottom are safe, and what happens when the keyboard opens.
Next: Screens and navigation Back to Phase 6
On this page
  1. 01Safe areas and the keyboard
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

A phone screen is not a clean rectangle. At the top there is the status bar with the clock and battery, and often a notch or camera hole. At the bottom there may be a home bar. Apps draw behind all of these, on iPhone and on new Android phones too. So a Text at the very top of your screen can end up under the clock.

Think of a wall poster with a light switch on it. You don't write over the switch; you leave a margin around it. The part of the screen nothing covers is the safe area.

import { SafeAreaView } from "react-native-safe-area-context";
 
<SafeAreaView style={{ flex: 1 }}>
  <Text>My habits</Text>
</SafeAreaView>

SafeAreaView is a normal View that adds just enough padding on each edge for this exact phone. Use the one from react-native-safe-area-context. React Native has an old SafeAreaView of its own, but it is deprecated and only worked on iPhone. New Expo projects with Expo Router already have the package. If you only want some edges, say which: edges={["top"]}.

You don't always need it. A screen with a Stack header already sits below the status bar, because the header handles the top. A tab bar handles the bottom. You need it on screens with no header, like your home screen inside tabs with headerShown: false.

The keyboard is the other thing that covers your screen. When someone taps a TextInput near the bottom, the keyboard slides up over it. KeyboardAvoidingView moves your content up out of the way:

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{ flex: 1 }}>

Platform.OS is "ios" or "android". The Expo docs use "padding" on iPhone and nothing on Android, where the system already moves the content for you. Try other values if your screen still gets covered.

People often check only the browser preview. A browser has no notch and no on-screen keyboard, so the problem never shows. Always open the screen in Expo Go on a real phone, and tap the input at the bottom.

When you read a screen, look at its outermost component: is it a SafeAreaView, or is there a header above it? If it has a TextInput near the bottom, look for a KeyboardAvoidingView.

Words to recognise
safe areaSafeAreaViewnotchKeyboardAvoidingViewPlatform.OS

A phone screen is not a clean rectangle. At the top there is the status bar with the clock and battery, and often a notch or camera hole. At the bottom there may be a home bar. Apps draw behind all of these, on iPhone and on new Android phones too. So a Text at the very top of your screen can end up under the clock.

Think of a wall poster with a light switch on it. You don't write over the switch; you leave a margin around it. The part of the screen nothing covers is the safe area.

import { SafeAreaView } from "react-native-safe-area-context";
 
<SafeAreaView style={{ flex: 1 }}>
  <Text>My habits</Text>
</SafeAreaView>

SafeAreaView is a normal View that adds just enough padding on each edge for this exact phone. Use the one from react-native-safe-area-context. React Native has an old SafeAreaView of its own, but it is deprecated and only worked on iPhone. New Expo projects with Expo Router already have the package. If you only want some edges, say which: edges={["top"]}.

You don't always need it. A screen with a Stack header already sits below the status bar, because the header handles the top. A tab bar handles the bottom. You need it on screens with no header, like your home screen inside tabs with headerShown: false.

The keyboard is the other thing that covers your screen. When someone taps a TextInput near the bottom, the keyboard slides up over it. KeyboardAvoidingView moves your content up out of the way:

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{ flex: 1 }}>

Platform.OS is "ios" or "android". The Expo docs use "padding" on iPhone and nothing on Android, where the system already moves the content for you. Try other values if your screen still gets covered.

People often check only the browser preview. A browser has no notch and no on-screen keyboard, so the problem never shows. Always open the screen in Expo Go on a real phone, and tap the input at the bottom.

When you read a screen, look at its outermost component: is it a SafeAreaView, or is there a header above it? If it has a TextInput near the bottom, look for a KeyboardAvoidingView.

Words to recognise
safe areaSafeAreaViewnotchKeyboardAvoidingViewPlatform.OS