Skip to content
JS only version of SafeAreaView for supporting iPhone X safe area insets.
Branch: master
Clone or download
Latest commit 5000a8a Feb 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc
.gitignore
LICENSE Initial commit Oct 31, 2017
README.md
index.d.ts
index.js
index.js.flow
index.web.js
package.json
withOrientation.js
yarn.lock add babelrc, add react, react-native to devDependencies Feb 6, 2018

README.md

react-native-safe-area-view

This is a JS-only version of React Native's SafeAreaView, it adds a small api that makes SafeAreaView more flexible for complex UIs.

Usage

Wrap components that touch any edge of the screen with SafeAreaView.

<SafeAreaView>
  <View>
    <Text>Look, I'm safe!</Text>
  </View>
</SafeAreaView>

forceInset

Sometimes you will observe unexpected behavior and jank because SafeAreaView uses onLayout then calls measureInWindow on the view. If you know your view will touch certain edges, use forceInset to force it to apply the inset padding on the view.

<SafeAreaView forceInset={{ top: 'always' }}>
  <View>
    <Text>Yeah, I'm safe too!</Text>
  </View>
</SafeAreaView>

forceInset takes an object with the keys top | bottom | left | right | vertical | horizontal and the values 'always' | 'never'. Or you can override the padding altogether by passing an integer.

With HOC

Sometimes you would prefer to use a higher-order component to wrap components.

withSafeArea()(Component);

// Or with forceInset props
withSafeArea({ top: 'always' })(Component);
You can’t perform that action at this time.