What is react-native-safe-area-context?
The react-native-safe-area-context package provides a way to handle safe area insets in a React Native application. It helps to ensure that content is not obscured by device notches, status bars, or other screen elements.
What are react-native-safe-area-context's main functionalities?
SafeAreaProvider
The SafeAreaProvider component is used to wrap the entire application or a part of it to provide safe area insets to its children.
import { SafeAreaProvider } from 'react-native-safe-area-context';
const App = () => {
return (
<SafeAreaProvider>
{/* Your app content */}
</SafeAreaProvider>
);
};
useSafeAreaInsets
The useSafeAreaInsets hook provides the current safe area insets, which can be used to adjust the layout of components to avoid overlaps with device notches or status bars.
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const MyComponent = () => {
const insets = useSafeAreaInsets();
return (
<View style={{ paddingTop: insets.top }}>
{/* Your component content */}
</View>
);
};
SafeAreaView
The SafeAreaView component is a view that automatically applies safe area insets as padding to its children, ensuring that content is not obscured by device notches or status bars.
import { SafeAreaView } from 'react-native-safe-area-context';
const MyScreen = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
{/* Your screen content */}
</SafeAreaView>
);
};
Other packages similar to react-native-safe-area-context
react-native-safe-area-view
The react-native-safe-area-view package provides a similar functionality to react-native-safe-area-context by offering a SafeAreaView component that applies safe area insets to its children. However, it does not provide hooks like useSafeAreaInsets and is generally considered less flexible.
react-native-safe-area
The react-native-safe-area package offers utilities to handle safe area insets, but it is less comprehensive compared to react-native-safe-area-context. It primarily focuses on providing a SafeAreaView component and lacks the context and hooks provided by react-native-safe-area-context.
react-native-safe-area-context
A flexible way to handle safe area, also works on Android!
Getting started
Install the library using either Yarn:
yarn add react-native-safe-area-context
or npm:
npm install --save react-native-safe-area-context
You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:
react-native link react-native-safe-area-context
If you can't or don't want to use the CLI tool, you can also manually link the library using the instructions below (click on the arrow to show them):
Manually link the library on iOS
Either follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile
:
pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'
Manually link the library on Android
Make the following changes:
android/settings.gradle
include ':react-native-safe-area-context'
project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
android/app/build.gradle
dependencies {
...
implementation project(':react-native-safe-area-context')
}
android/app/src/main/.../MainApplication.java
On top, where imports are:
import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
Add the SafeAreaContextPackage
class to your list of exported packages.
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new SafeAreaContextPackage()
);
}
Usage
Add SafeAreaProvider
in your app root component:
import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
return (
<SafeAreaProvider>
...
</SafeAreaProvider>
);
}
Usage with hooks api:
import { useSafeArea } from 'react-native-safe-area-context';
function HookComponent() {
const insets = useSafeArea();
return <View style={{ paddingTop: insets.top }} />;
}
Usage with consumer api:
import { SafeAreaConsumer } from 'react-native-safe-area-context';
class ClassComponent extends React.Component {
render() {
return (
<SafeAreaConsumer>
{insets => <View style={{ paddingTop: insets.top }} />}
</SafeAreaConsumer>
);
}
}