Skip to content
No description, website, or topics provided.
Java TypeScript Objective-C Ruby JavaScript Python
Branch: master
Clone or download
Latest commit 2d73e6f Sep 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Run CI on PRs, fix lint + ts Aug 19, 2019
android Rename android package, add readme instructions Aug 16, 2019
example Fix project name and example project (#5) Aug 29, 2019
ios [iOS] Fix manual linking (#6) Aug 30, 2019
src Handle nested providers (#9) Sep 13, 2019
.eslintignore Initial project setup for ios Aug 14, 2019
.eslintrc.js Change api, fix android Aug 16, 2019
.gitattributes Initial project setup for ios Aug 14, 2019
.gitignore Initial project setup for ios Aug 14, 2019
.prettierrc Initial project setup for ios Aug 14, 2019
.watchmanconfig Initial project setup for ios Aug 14, 2019
LICENSE Initial commit Aug 14, 2019
README.md Update README.md Sep 1, 2019
babel.config.js Rename to react-native-safe-area-context Aug 16, 2019
metro.config.js Initial project setup for ios Aug 14, 2019
package.json
react-native-safe-area-context.podspec Rename to react-native-safe-area-context Aug 16, 2019
tsconfig.json Run CI on PRs, fix lint + ts Aug 19, 2019
yarn.lock Add bob Aug 27, 2019

README.md

react-native-safe-area-context

npm Actions Status Supports Android, iOS and web MIT License

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

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>
    );
  }
}

Resources

You can’t perform that action at this time.