Janic Duplessis 2641d9039c
Rename PULL_REQUEST_TEMPLATE to PULL_REQUEST_TEMPLATE.md
5 gadus atpakaļ
.github Rename PULL_REQUEST_TEMPLATE to PULL_REQUEST_TEMPLATE.md 5 gadus atpakaļ
android Rename android package, add readme instructions 5 gadus atpakaļ
example Rename android package, add readme instructions 5 gadus atpakaļ
ios Update RNCSafeAreaViewManager.m 5 gadus atpakaļ
src Add consumer api 5 gadus atpakaļ
.eslintignore Initial project setup for ios 5 gadus atpakaļ
.eslintrc.js Change api, fix android 5 gadus atpakaļ
.gitattributes Initial project setup for ios 5 gadus atpakaļ
.gitignore Initial project setup for ios 5 gadus atpakaļ
.prettierrc Initial project setup for ios 5 gadus atpakaļ
.watchmanconfig Initial project setup for ios 5 gadus atpakaļ
LICENSE Initial commit 5 gadus atpakaļ
README.md Update example 5 gadus atpakaļ
babel.config.js Rename to react-native-safe-area-context 5 gadus atpakaļ
metro.config.js Initial project setup for ios 5 gadus atpakaļ
package.json Rename android package, add readme instructions 5 gadus atpakaļ
react-native-safe-area-context.podspec Rename to react-native-safe-area-context 5 gadus atpakaļ
tsconfig.json Initial project setup for ios 5 gadus atpakaļ
yarn.lock Update yarn.lock 5 gadus atpakaļ

README.md

react-native-safe-area-context

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