Skip to content
A flexible way to handle safe area insets in JS. Also works on Android and Web!
TypeScript Java Objective-C Ruby JavaScript Starlark
Branch: master
Clone or download

Latest commit

dependabot Bump acorn from 6.4.0 to 6.4.1 (#62)
Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1.
- [Release notes](https://github.com/acornjs/acorn/releases)
- [Commits](acornjs/acorn@6.4.0...6.4.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Latest commit 1e60db7 Mar 15, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Cache yarn deps Feb 6, 2020
android Handle null root window insets Feb 13, 2020
example Remove android singning config Feb 6, 2020
ios Add support for getting initial safe area insets on mount (#27) Feb 5, 2020
src Run unit tests on CI, fix InitialWindowSafeAreaInsets with jest and a… Feb 6, 2020
.eslintignore Remove executable bit from non-executable files (#42) Jan 30, 2020
.eslintrc.js Remove executable bit from non-executable files (#42) Jan 30, 2020
.gitattributes Remove executable bit from non-executable files (#42) Jan 30, 2020
.gitignore Remove executable bit from non-executable files (#42) Jan 30, 2020
.prettierrc Remove executable bit from non-executable files (#42) Jan 30, 2020
.watchmanconfig Initial project setup for ios Aug 14, 2019
LICENSE Initial commit Aug 14, 2019
README.md Update README.md (#52) Feb 9, 2020
babel.config.js Remove executable bit from non-executable files (#42) Jan 30, 2020
metro.config.js Initial project setup for ios Aug 14, 2019
package.json 0.7.3 Feb 13, 2020
react-native-safe-area-context.podspec Remove executable bit from non-executable files (#42) Jan 30, 2020
tsconfig.json Remove executable bit from non-executable files (#42) Jan 30, 2020
yarn.lock Bump acorn from 6.4.0 to 6.4.1 (#62) Mar 15, 2020

README.md

react-native-safe-area-context

npm CI Supports Android, iOS and web MIT License

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

Getting started

Install the library using either Yarn:

yarn add react-native-safe-area-context

or npm:

npm install --save react-native-safe-area-context

You then need to link the native parts of the library for the platforms you are using. 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 => '../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

Add SafeAreaProvider in your app root component:

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

function App() {
  return <SafeAreaProvider>...</SafeAreaProvider>;
}

Usage with hooks api:

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

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

  return <View style={{ paddingTop: insets.top }} />;
}

Usage with consumer api:

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

class ClassComponent extends React.Component {
  render() {
    return (
      <SafeAreaConsumer>
        {insets => <View style={{ paddingTop: insets.top }} />}
      </SafeAreaConsumer>
    );
  }
}

Usage with SafeAreaView:

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

function SomeComponent() {
  return (
    <SafeAreaView>
      <View />
    </SafeAreaView>
  );
}

Web SSR

If you are doing server side rendering on the web you can use initialSafeAreaInsets to inject insets 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

To speed up the initial render, you can import initialWindowSafeAreaInsets from this package and set as the initialSafeAreaInsets 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,
  initialWindowSafeAreaInsets
} from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
      ...
    </SafeAreaProvider>
  );
}

Resources

You can’t perform that action at this time.