A simple react native module that allows to query `safeAreaInsets` of a current root view
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example Initial commit Sep 14, 2018
ios Fix: IPHONEOS_DEPLOYMENT_TARGET 11.4 -> 8.0 Sep 19, 2018
lib Initial commit Sep 14, 2018
.babelrc
.eslintrc
.gitignore Initial commit Sep 14, 2018
.npmignore Misc: exclude unnecessary files from npm package Sep 19, 2018
.watchmanconfig
README.md
package.json 0.0.4 Sep 19, 2018
yarn.lock

README.md

react-native-safe-area-insets

npm version npm version

A simple react native module that allows to query safeAreaInsets of a current root view.

Use this module if you need to know the actual numerical values of the insets. Use SafeAreaView if you just want to render content within the safe area boundaries of a device.

Installation

yarn add @delightfulstudio/react-native-safe-area-insets

Manual linking

  1. Open your project in XCode
  2. Add ./node_modules/@delightfulstudio/react-native-safe-area-insets/ios/RNSafeAreaInsets.xcodeproj to Libraries in your project
  3. Select root of your project
  4. Switch to General tab
  5. Scroll down to Linked Frameworks and Libraries section
  6. Click button +
  7. Add libRNSafeAreaInsets.a (if it's not present, build the project and try again)

Usage

import { currentInsets } from "@delightfulstudio/react-native-safe-area-insets";

import React, { Component } from "react";
import { View } from "react-native";


class MyRootComponent extends Component {
    state = {};

    async componentWillMount() {
        const insets = await currentInsets();
        this.setState( {
            style: {
                marginLeft: insets.left,
                marginRight: insets.right,
                marginTop: insets.top,
                marginBottom: insets.bottom,
            }
        } );
    }

    render() {
        if ( !this.state.style )
            return null;

        return (
            <View style={ [ this.state.style ] }>
                ...
            </View>
        );
    }
}