gem-hunter
Language: TypeScript
⚠️ Deprecated: use the successor react-native-safe-area-context instead!
⚠️ This library is deprecated. It is no longer used in React Navigation and it has been succeeded by the excellent react-native-safe-area-context. Please use react-native-safe-area-context instead, or you are likely to have a bad time.
This library provides automatic padding when a view intersects with a safe area (notch, status bar, home indicator).
💡 The
latestrelease is currently marked as 1.1.1 and depends on react-native-safe-area-context@^0.7.3. To use react-native-safe-area-context@^1.0.0, you will need to install react-native-safe-area-view@2.0.0 - this currently has thenexttag on npm.
expo install react-native-safe-area-view react-native-safe-area-context
yarn add react-native-safe-area-view react-native-safe-area-context
Next, you need to link react-native-safe-area-context. If you are using autolinking, run npx pod-install again. If not, follow these instructions. Then re-build your app binary.
First you need to wrap the root of your app with the SafeAreaProvider.
import * as React from 'react'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import MyAwesomeApp from './src/MyAwesomeApp'; export default function App() { return ( <SafeAreaProvider> <MyAwesomeApp /> </SafeAreaProvider> ); }
Now you can wrap components that touch any edge of the screen with a SafeAreaView.
import SafeAreaView from 'react-native-safe-area-view'; export default function MyAwesomeApp() { return ( <SafeAreaView style={{ flex: 1 }}> <View style={{ flex: 1 }}> <Text> Look, I'm safe! Not under a status bar or notch or home indicator or anything! Very cool </Text> </View> </SafeAreaView> ); }
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.
Sometimes it's useful to know what the insets are for the top, right, bottom, and left of the screen. See the documentation for react-native-safe-area-context for more information.