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
- Open your project in XCode
- Add
./node_modules/@delightfulstudio/react-native-safe-area-insets/ios/RNSafeAreaInsets.xcodeprojtoLibrariesin your project - Select root of your project
- Switch to
Generaltab - Scroll down to
Linked Frameworks and Librariessection - Click button
+ - 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>
);
}
}