SafeAreaView renders content within the safe area boundaries of a device, automatically applying padding to reflect areas not covered by navigation bars, tab bars, toolbars, and physical limitations like rounded corners or notches.
Migration Required
Instead of using SafeAreaView, install and use react-native-safe-area-context:
npm install react-native-safe-area-context
# or
yarn add react-native-safe-area-context
import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
return (
<SafeAreaProvider>
{/* Your app content */}
</SafeAreaProvider>
);
}
SafeAreaView from the library:
import { SafeAreaView } from 'react-native-safe-area-context';
function Screen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text>This content avoids the notch and home indicator</Text>
</SafeAreaView>
);
}
Why Migrate?
The react-native-safe-area-context library provides:
- Cross-platform support - Works on iOS and Android (React Native’s SafeAreaView only works on iOS)
- More control - Customize which edges to apply padding to
- Better hooks -
useSafeAreaInsets() for accessing insets in functional components
- Active maintenance - Regularly updated with new device support
- Web support - Works with React Native Web
Old Usage (Deprecated)
The following examples are for reference only. Do not use SafeAreaView from React Native in new code.
import { SafeAreaView, Text, StyleSheet } from 'react-native';
function Screen() {
return (
<SafeAreaView style={styles.container}>
<Text>Content avoids safe areas</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
Migration Examples
Basic Screen
// OLD (deprecated)
import { SafeAreaView } from 'react-native';
function Screen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text>Content</Text>
</SafeAreaView>
);
}
// NEW (recommended)
import { SafeAreaView } from 'react-native-safe-area-context';
function Screen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text>Content</Text>
</SafeAreaView>
);
}
Selective Edge Padding
// NEW - Control which edges get padding
import { SafeAreaView } from 'react-native-safe-area-context';
function Screen() {
return (
<SafeAreaView edges={['top', 'left', 'right']} style={{ flex: 1 }}>
{/* Only top, left, and right edges get safe area padding */}
<Text>Content</Text>
</SafeAreaView>
);
}
Using Insets Directly
// NEW - Access insets with hooks
import { useSafeAreaInsets } from 'react-native-safe-area-context';
function CustomComponent() {
const insets = useSafeAreaInsets();
return (
<View style={{
paddingTop: insets.top,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
}}>
<Text>Custom safe area handling</Text>
</View>
);
}
// NEW - Combining with ScrollView
import { SafeAreaView } from 'react-native-safe-area-context';
function Screen() {
return (
<SafeAreaView style={{ flex: 1 }} edges={['top']}>
<ScrollView contentContainerStyle={{ padding: 16 }}>
<Text>Scrollable content</Text>
</ScrollView>
</SafeAreaView>
);
}
// NEW - Button that respects safe area
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
function Screen() {
const insets = useSafeAreaInsets();
return (
<View style={{ flex: 1 }}>
<ScrollView>
<Text>Content</Text>
</ScrollView>
<View style={{ paddingBottom: insets.bottom }}>
<Button title="Submit" onPress={handleSubmit} />
</View>
</View>
);
}
iOS
The deprecated SafeAreaView only worked on iOS 11+:
- Automatically avoided notches, status bar, and home indicator
- Rendered as native
RCTSafeAreaView
Android
The deprecated SafeAreaView rendered as a regular View on Android with no safe area handling.
The new react-native-safe-area-context works on both platforms.
Installation Guide
Step 1: Install Package
npm install react-native-safe-area-context
Step 2: iOS Setup
Step 3: Wrap Your App
import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
return (
<SafeAreaProvider>
<Navigation />
</SafeAreaProvider>
);
}
Step 4: Update Components
Replace all imports:
// Change this:
import { SafeAreaView } from 'react-native';
// To this:
import { SafeAreaView } from 'react-native-safe-area-context';
Resources
Do not use React Native’s built-in SafeAreaView. It is deprecated and will be removed. Always use react-native-safe-area-context instead.