react-native-safe-area-insets

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