Using SafeAreaView with React Native Navigation

Madeline Watts

Software Engineer

GitHubLinkedIn

Read More

Hello! I'm Madeline, the founder of AppHelion and full time app developer. I have developed and published several apps using a variety of frameworks and I started AppHelion to share what I've learned!

Last Updated: May 2025

View on GitHub

If you've just started developing your React Native app and noticed your content is not where you want it, i.e., looks like this:

you'll want to utilize the react-native-safe-area-context package to ensure all of your app's content stays in view and is accessible!

Using react-native-safe-area-context

1. Install the package: npm install react-native-safe-area-context

2. Use the SafeAreaView:

• Globally: this will automatically apply the SafeAreaView to your entire app

Open the entry point of your app (App.tsx in my case) and wrap it with SafeAreaProvider and SafeAreaView (apply style={{flex: 1}})

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import HomeScreen from './src/screens/HomeScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import {RootStackParamList} from './src/types/NavigationTypes';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

const Stack = createNativeStackNavigator<RootStackParamList>();

function App(): React.JSX.Element {
  return (
    <SafeAreaProvider> // ⭐️
      <SafeAreaView style={{flex: 1}}> // ⭐️
        <NavigationContainer>
          <Stack.Navigator
            screenOptions={{
              headerShown: false,
            }}>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Profile" component={ProfileScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

export default App;

• Specific Components Only:

This will only apply the SafeAreaView to individual components. Below I apply SafeAreaView to just my app's profile screen and home screen.

// ProfileScreen.tsx

import React from 'react';
import {Text, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context'; // ⭐️
import {ProfileScreenRouteProp} from '../types';

type Props = {
  route: ProfileScreenRouteProp;
};

function ProfileScreen({route}: Props): React.JSX.Element {
  const {name} = route.params;

  return (
    <SafeAreaView style={{flex: 1}}> // ⭐️
      <View style={{padding: 5, alignItems: 'center', justifyContent: 'center', flex: 1}}>
        <Text>Profile Screen</Text>
        <Text>Welcome, {name}!</Text>
      </View>
    </SafeAreaView>
  );
}

export default ProfileScreen;

HomeScreen.tsx:

// HomeScreen.tsx
import React from 'react';
import {Button, Text, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {HomeScreenNavigationProp} from '../types';

type Props = {
  navigation: HomeScreenNavigationProp;
};

function HomeScreen({navigation}: Props): React.JSX.Element {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{padding: 5, alignItems: 'center', justifyContent: 'center', flex: 1}}>
        <Text>HomePage</Text>
        <Button
          title="Go to the profile screen"
          onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
        />
      </View>
    </SafeAreaView>
  );
}

export default HomeScreen;

I've fixed the layout issue and now my app looks like this:

Background Color

You'll notice that the top and bottom sections of the screens are white while the content had a grey background. I want to update the grey background to be white.

First, navigate to your app's entry point (App.tsx, index.js, etc.) and add this to your NavigationContainer:

<NavigationContainer
          theme={{
            ...DefaultTheme,
            colors: {
              ...DefaultTheme.colors,
              background: 'white', // ⭐️
            },
          }}>

Here I am using the default theme and the default theme's color via the spread operator (...DefaultTheme and ...DefaultTheme.colors) and overwriting the default background color by setting background: 'white'.

note

This will apply the background color globally so all screens in your app will have a white background.

This change should look like this:

warning

Dark Mode

SafeAreaView updates the header and footer automatically for the devices appearance mode (i.e., dark mode and light mode).

This is what the code from above looks like in dark mode:

If you wish to support dark mode, you have to update the background color accordingly.

If you do not want to support dark mode use the code below!

Changing the Background Color of the Footer and Header

You'll use the solution from above and add <View style={{flex: 1, backgroundColor: 'white', }}>.

import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import HomeScreen from './src/screens/HomeScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import {RootStackParamList} from './src/types/NavigationTypes';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
import {StyleSheet, View} from 'react-native';

const Stack = createNativeStackNavigator<RootStackParamList>();

function App(): React.JSX.Element {
  return (
    <SafeAreaProvider>
      <View style={{flex: 1,  backgroundColor: 'white', }}> // ⭐️ Add this line!!
        <SafeAreaView style={{flex: 1}}>
          <NavigationContainer
            theme={{
              ...DefaultTheme,
              colors: {
                ...DefaultTheme.colors,
                background: 'red', // ⭐️ previous solution
              },
            }}>
            <Stack.Navigator
              screenOptions={{
                headerShown: false,
              }}>
              <Stack.Screen name="Home" component={HomeScreen} />
              <Stack.Screen name="Profile" component={ProfileScreen} />
            </Stack.Navigator>
          </NavigationContainer>
        </SafeAreaView>
      </View>
    </SafeAreaProvider>
  );
}

export default App;

Now the app's screen is fully white and will be regardless of the device's appearance mode!

You can overwrite additional default themes, to learn more visit the official React Navigation theme docs.