Skip to content

safe-areas.md

Latest commit

 

History

History
117 lines (82 loc) · 3.26 KB

safe-areas.md

File metadata and controls

117 lines (82 loc) · 3.26 KB

Safe Areas

Learn how to add safe areas for screen components inside your Expo project.

Overview

Creating a safe area ensures your app screen's content is positioned correctly and doesn't get overlapped by notches, status bars, home indicators, and other interface elements.

Installation

react-native-safe-area-context is already installed as a peer dependency of Expo Router. If you need to install it separately:

npx expo install react-native-safe-area-context

Using SafeAreaView

The simplest way to handle safe areas is using the SafeAreaView component:

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

export default function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Text>Content is in safe area.</Text>
    </SafeAreaView>
  );
}

SafeAreaView is a regular <View> with safe area insets applied as extra padding or margin.

Using useSafeAreaInsets Hook

For more control, use the useSafeAreaInsets hook:

import { Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export default function HomeScreen() {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{ flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom }}
    >
      <Text>Content is in safe area.</Text>
    </View>
  );
}

Insets Object

The hook provides insets in the following object:

{
  top: number,    // Top safe area inset
  right: number, // Right safe area inset
  bottom: number, // Bottom safe area inset
  left: number   // Left safe area inset
}

With Expo Router

Expo Router automatically sets up SafeAreaProvider, so you can use SafeAreaView or useSafeAreaInsets directly in your routes.

Without Expo Router

If you're not using Expo Router, wrap your app with SafeAreaProvider:

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

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

Edge-to-Edge Layout

When using edge-to-edge layout (especially on Android), safe areas become crucial:

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

export default function Screen() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#000' }}>
      {/* Your content extends to edges but respects safe areas */}
    </SafeAreaView>
  );
}

Web Support

For web, set up SafeAreaProvider as described above. If you're doing server-side rendering (SSR), see the Web SSR section in the library's documentation.

Best Practices

  1. Always Use Safe Areas: Especially important on devices with notches
  2. Test on Multiple Devices: Safe areas vary by device
  3. Combine with Edge-to-Edge: Use safe areas when enabling edge-to-edge layout
  4. Consider Orientation: Safe areas change when device rotates

References