Skip to main content

SafeAreaProvider

You should add SafeAreaProvider in your app root component. You may need to add it in other places like the root of modals and routes when using react-native-screens.

Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates.

Example​

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

function App() {
  return <SafeAreaProvider>{/*...*/}</SafeAreaProvider>;
}

Props​

Accepts all View props. Has a default style of {flex: 1}.

initialMetrics​

Optional, defaults to null.

Can be used to provide the initial value for frame and insets, this allows rendering immediately. See optimization for more information on how to use this prop.

ref​

Optional ref to the underlying view.