react-native-safe-area-helper

Introduction

This is a simple component that lets you know what the insets/paddings for safe area are. Helps when adding support for iPhone X and similar devices.

Installation

npm install react-native-safe-area-helper --save

Usage (with optional flow types)

import SafeAreaHelper, { type SafeAreaInsets } from 'react-native-safe-area-helper'

class App extends Component {
    onInsetsChange = (insets: SafeAreaInsets) => {
        console.log(insets) // { top: 44, bottom: 20, left: 22, right: 0, }
    }

    render() {
        return (
            <View>
                ...
                // It tries to fill the whole screen with absolute transparent view
                <SafeAreaHelper onInsetsChange={this.onInsetsChange} />
            </View>
        )
    }
}