Safe Area Hooks and Contexts

useSafeAreaInsets

Returns the safe area insets of the nearest provider. This allows manipulating the inset values from JavaScript. Note that insets are not updated synchronously so it might cause a slight delay for example when rotating the screen.

Object with { top: number, right: number, bottom: number, left: number }.

Example

import { useSafeAreaInsets } from 'react-native-safe-area-context';

function HookComponent() {
  const insets = useSafeAreaInsets();

  return <View style={{ paddingBottom: Math.max(insets.bottom, 16) }} />;
}

useSafeAreaFrame

Returns the frame of the nearest provider. This can be used as an alternative to the Dimensions module.

Object with { x: number, y: number, width: number, height: number }

SafeAreaInsetsContext

React Context with the value of the safe area insets.

Can be used with class components:

import { SafeAreaInsetsContext } from 'react-native-safe-area-context';

class ClassComponent extends React.Component {
  render() {
    return (
      <SafeAreaInsetsContext.Consumer>
        {(insets) => <View style={{ paddingTop: insets.top }} />}
      </SafeAreaInsetsContext.Consumer>
    );
  }
}

SafeAreaFrameContext

React Context with the value of the safe area frame.