Nenhuma descrição
Rapsssito c1c143bcad fix: Android stand-alone build.gradle with .gitignore (#33) 5 anos atrás
.github Run CI on PRs, fix lint + ts 5 anos atrás
android fix: Android stand-alone build.gradle with .gitignore (#33) 5 anos atrás
example Use translucent status bar in example 5 anos atrás
ios Avoid sending wrong insets because rn hasn't set view size yet 5 anos atrás
src Fix `Import declaration conflicts with local declaration of 'EdgeInsets'` 5 anos atrás
.eslintignore Initial project setup for ios 5 anos atrás
.eslintrc.js Update deps and example 5 anos atrás
.gitattributes Initial project setup for ios 5 anos atrás
.gitignore fix: Android stand-alone build.gradle with .gitignore (#33) 5 anos atrás
.prettierrc Initial project setup for ios 5 anos atrás
.watchmanconfig Initial project setup for ios 5 anos atrás
LICENSE Initial commit 5 anos atrás
README.md Allow injecting intial insets 5 anos atrás
babel.config.js Rename to react-native-safe-area-context 5 anos atrás
metro.config.js Initial project setup for ios 5 anos atrás
package.json 0.6.1 5 anos atrás
react-native-safe-area-context.podspec Rename to react-native-safe-area-context 5 anos atrás
tsconfig.json Run CI on PRs, fix lint + ts 5 anos atrás
yarn.lock Add js tests 5 anos atrás

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 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.

Resources