Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-safe-area-view with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. require("react-native-safe-area-context/package.json"); // react-native-safe-area-context is a peer dependency. var reactNativeSafeAreaView = require("react-native-safe-area-view")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-safe-area-view v1.0.0

Add padding to your views to account for notches, home indicators, status bar, and possibly other future things.

react-native-safe-area-view

This library provides automatic padding when a view intersects with a safe area (notch, status bar, home indicator).

_You are reading the README for 1.0.0! Please note that the API has changed in 1.0, released on September 26, 2019, see the CHANGELOG for more information. If you are using Expo SDK <= 34 you will need to use the legacy branch._.

Installation

In the Expo managed workflow:

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

In bare React Native projects:

yarn add react-native-safe-area-view react-native-safe-area-context

Next, you need to link react-native-safe-area-context. If you are using autolinking, run pod install again. If not, follow these instructions. Then re-build your app binary.

Usage

First you need to wrap the root of your app with the SafeAreaProvider.

import * as React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import MyAwesomeApp from './src/MyAwesomeApp';

export default function App() {
  return (
    <SafeAreaProvider>
      <MyAwesomeApp />
    </SafeAreaProvider>
  );
}

Now you can wrap components that touch any edge of the screen with a SafeAreaView.

import SafeAreaView from 'react-native-safe-area-view';

export default function MyAwesomeApp() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Text>
          Look, I'm safe! Not under a status bar or notch or home indicator or
          anything! Very cool
        </Text>
      </View>
    </SafeAreaView>
  );
}

forceInset

Sometimes you will observe unexpected behavior and jank because SafeAreaView uses onLayout then calls measureInWindow on the view. If you know your view will touch certain edges, use forceInset to force it to apply the inset padding on the view.

<SafeAreaView forceInset={{ top: 'always' }}>
  <View>
    <Text>Yeah, I'm safe too!</Text>
  </View>
</SafeAreaView>

forceInset takes an object with the keys top | bottom | left | right | vertical | horizontal and the values 'always' | 'never'. Or you can override the padding altogether by passing an integer.

Accessing safe area inset values

Sometimes it's useful to know what the insets are for the top, right, bottom, and left of the screen. See the documentation for react-native-safe-area-context for more information.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free