SafeAreaView in React Native

Introduction

SafeAreaView helps your app content avoid areas of the screen that are covered by things like notches, status bars, or rounded corners.

When you want your app content to be fully visible on phones with notches or curved edges.

When you want to avoid content being hidden behind the status bar or home indicator.

When designing a screen that should look good on all iPhone and Android devices with different screen shapes.

When you want to make sure buttons or text are not too close to the edges of the screen.

Syntax

React Native

import { SafeAreaView } from 'react-native';

<SafeAreaView style={{ flex: 1 }}>
  {/* Your content here */}
</SafeAreaView>

SafeAreaView is a component that wraps your content.

It automatically adds padding to keep content inside the safe visible area.

Examples

Basic usage wrapping a text element.

React Native

import { SafeAreaView, Text } from 'react-native';

export default function Example() {
  return (
    <SafeAreaView>
      <Text>Hello!</Text>
    </SafeAreaView>
  );
}

Adding style to fill the screen and set background color.

React Native

<SafeAreaView style={{ flex: 1, backgroundColor: 'lightblue' }}>
  <Text>Content inside safe area</Text>
</SafeAreaView>

Sample App

This app shows a centered text inside a SafeAreaView with a light blue background. The text will not be hidden behind any notch or status bar.

React Native

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Hello, safe area!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddeeff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 24,
    color: '#333'
  }
});

Important Notes

SafeAreaView works best on iOS devices with notches but also helps on Android.

Always use flex: 1 style to make SafeAreaView fill the screen.

On older Android devices, SafeAreaView may have no effect because they lack safe area insets.

Summary

SafeAreaView keeps your app content visible and not hidden behind screen cutouts.

Wrap your main screen content inside SafeAreaView with flex: 1 style.

Apply custom styles like background color for better appearance.