react-native-safe-area-context

by th3rdwave

A flexible way to handle safe area insets in JS. Also works on Android and Web!

653 Stars 63 Forks Last release: about 1 month ago (v3.1.8) MIT License 218 Commits 57 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-native-safe-area-context

npm Supports Android, iOS, web, macOS and Windows MIT License

JavaScript tests iOS build Android build

A flexible way to handle safe area, also works on Android and Web!

Getting started

npm install react-native-safe-area-context

You then need to link the native parts of the library for the platforms you are using.

Linking in React Native >= 0.60

Linking the package is not required anymore with Autolinking.

  • iOS Platform:

$ npx pod-install

Linking in React Native < 0.60

The easiest way to link the library is using the CLI tool by running this command from the root of your project:

react-native link react-native-safe-area-context

If you can't or don't want to use the CLI tool, you can also manually link the library using the instructions below (click on the arrow to show them):

Manually link the library on iOS

Either follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile:

pod 'react-native-safe-area-context', :path =&gt; '../node_modules/react-native-safe-area-context'
Manually link the library on Android

Make the following changes:

android/settings.gradle

include ':react-native-safe-area-context'
project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')

android/app/build.gradle

dependencies {
   ...
   implementation project(':react-native-safe-area-context')
}

android/app/src/main/.../MainApplication.java

On top, where imports are:

import com.th3rdwave.safeareacontext.SafeAreaContextPackage;

Add the SafeAreaContextPackage class to your list of exported packages.

@Override
protected List<reactpackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            ...
            new SafeAreaContextPackage()
    );
}

Usage

This library has 2 important concepts, if you are familiar with React Context this is very similar.

Providers

The SafeAreaProvider component is a

View
from where insets provided by Consumers are relative to. This means that if this view overlaps with any system elements (status bar, notches, etc.) these values will be provided to descendent consumers. Usually you will have one provider at the top of your app.

Consumers

Consumers are components and hooks that allow using inset values provided by the nearest parent Provider. Values are always relative to a provider and not to these components.

  • SafeAreaView is the preferred way to consume insets. This is a regular

    View
    with insets applied as extra padding or margin. It offers better performance by applying insets natively and avoids flickers that can happen with the other JS based consumers.
  • useSafeAreaInsets offers more flexibility, but can cause some layout flicker in certain cases. Use this if you need more control over how insets are applied.

API

SafeAreaProvider

You should add

SafeAreaProvider
in your app root component. You may need to add it in other places like the root of modals and routes when using
react-native-screen
.

Note that providers should not be inside a

View
that is animated with
Animated
or inside a
ScrollView
since it can cause very frequent updates.

Example

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

function App() { return ...; }

Props

Accepts all View props. Has a default style of

{flex: 1}
.
initialMetrics

Optional, defaults to

null
.

Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop.

SafeAreaView

SafeAreaView
is a regular
View
component with the safe area insets applied as padding or margin.

Padding or margin styles are added to the insets, for example

style={{paddingTop: 10}}
on a
SafeAreaView
that has insets of 20 will result in a top padding of 30.

Example

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

function SomeComponent() { return ( ); }

Props

Accepts all View props.

edges

Optional, array of

top
,
right
,
bottom
, and
left
. Defaults to all.

Sets the edges to apply the safe area insets to.

For example if you don't want insets to apply to the top edge because the view does not touch the top of the screen you can use:


mode

Optional,

padding
(default) or
margin
.

Apply the safe area to either the padding or the margin.

This can be useful for example to create a safe area aware separator component:


useSafeAreaInsets

Returns the safe area insets of the nearest provider. This allows manipulating the inset values from JavaScript. Note that insets are not updated synchronously so it might cause a slight delay for example when rotating the screen.

Object with

{ top: number, right: number, bottom: number, left: number }
.
import { useSafeAreaInsets } from 'react-native-safe-area-context';

function HookComponent() { const insets = useSafeAreaInsets();

return ; }

useSafeAreaFrame

Returns the frame of the nearest provider. This can be used as an alternative to the

Dimensions
module.

Object with

{ x: number, y: number, width: number, height: number }

SafeAreaInsetsContext

React Context with the value of the safe area insets.

Can be used with class components:

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

class ClassComponent extends React.Component { render() { return ( <safeareainsetscontext.consumer> {(insets) => } </safeareainsetscontext.consumer> ); } }

withSafeAreaInsets

Higher order component that provides safe area insets as the

insets
prop.

SafeAreaFrameContext

React Context with the value of the safe area frame.

initialWindowMetrics

Insets and frame of the window on initial render. This can be used with the

initialMetrics
from
SafeAreaProvider
. See optimization for more information.

Object with:

{
  frame: { x: number, y: number, width: number, height: number },
  insets: { top: number, left: number, right: number, bottom: number },
}

Deprecated apis

useSafeArea

Use

useSafeAreaInsets
intead.

SafeAreaConsumer

Use

SafeAreaInsetsContext.Consumer
instead.

SafeAreaContext

Use

SafeAreaInsetsContext
instead.

initialWindowSafeAreaInsets

Use

initialWindowMetrics
instead.

Web SSR

If you are doing server side rendering on the web you can use

initialMetrics
to inject insets and frame value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.

Optimization

If you can, use

SafeAreaView
. It's implemented natively so when rotating the device, there is no delay from the asynchronous bridge.

To speed up the initial render, you can import

initialWindowMetrics
from this package and set as the
initialMetrics
prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using
react-native-navigation
.
import {
  SafeAreaProvider,
  initialWindowMetrics,
} from 'react-native-safe-area-context';

function App() { return ( ... ); }

Testing

When testing components nested under

SafeAreaProvider
, ensure to pass
initialMetrics
to provide mock data for frame and insets and ensure the provider renders its children.
export function TestSafeAreaProvider({ children }) {
  return (
    
      {children}
    
  );
}

Contributing

See the Contributing Guide

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.