SafeAreaView

This component is deprecated. Use react-native-safe-area-context instead. SafeAreaView will be removed in a future release of React Native.

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

Then wrap your app with the provider:

import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider>
      {/* Your app content */}
    </SafeAreaProvider>
  );
}

And use 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>
  );
}

ScrollView Pattern

// 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>
  );
}

Fixed Bottom Button

// 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>
  );
}

Platform Differences

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

cd ios && pod install

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.

Core Components

User Interface

List Components

Android Components

iOS Components

Migration Required

Why Migrate?

Old Usage (Deprecated)

Migration Examples

Basic Screen

Selective Edge Padding

Using Insets Directly

ScrollView Pattern

Fixed Bottom Button

Platform Differences

iOS

Android

Installation Guide

Step 1: Install Package

Step 2: iOS Setup

Step 3: Wrap Your App

Step 4: Update Components

Resources

​Migration Required

​Why Migrate?

​Old Usage (Deprecated)

​Migration Examples

​Basic Screen

​Selective Edge Padding

​Using Insets Directly

​ScrollView Pattern

​Fixed Bottom Button

​Platform Differences

​iOS

​Android

​Installation Guide

​Step 1: Install Package

​Step 2: iOS Setup

​Step 3: Wrap Your App

​Step 4: Update Components

​Resources

Migration Required

Why Migrate?

Old Usage (Deprecated)

Migration Examples

Basic Screen

Selective Edge Padding

Using Insets Directly

ScrollView Pattern

Fixed Bottom Button

Platform Differences

iOS

Android

Installation Guide

Step 1: Install Package

Step 2: iOS Setup

Step 3: Wrap Your App

Step 4: Update Components

Resources