In React native, the main goal of SafeAreaView component is to render content within the safe area boundaries of a device. All smartphones nowadays come with an edge-to-edge display. But smartphones must have some space left for the front cameras. Therefore all smartphones come with a notch or punch hole on the screen to fit the camera inside. It makes designing an app difficult for the developers because sometimes UI components go under this notch and it disrupts the design.
If you use the normal View component in React Native, you have to take care of this situation by yourself and make sure all the UI components render within the safe are boundaries of a device. But SafeAreaView component takes away that headache from you and makes sure everything works fine on a device. Every component you write in SafeAreaView will render within the safe area boundaries of a device.
SafeAreaView renders nested content and automatically applies padding to reflect the view that is not covered by navigation bars, tab bars, and toolbars. Safe Area’s paddings reflect the physical limitation of the screen, such as rounded corners or camera notches.
It is currently only applicable to iOS devices with iOS version 11 or later.
Below you can see the difference between a View component and a SafeAreaView component.
Normal View Component: As you can see above, when we render a Text component in a View component, it goes out of the screen. It is because the smartphone notch, disrupts the whole design.
Normal View Component
SafeAreaView Component: As you can clearly see the difference, when we render a Text component in a SafeAreView component, it makes sure to render content within the safe area boundaries of a device.
SafeAreaView Component
Creating Application:
Step 1: Open your Terminal and run the below command. It will install Expo CLI globally in your system.
npm install -g expo-cli
Step 2: Now, create a new React Native Project by running the below command.
expo init "Your_Project_Name"
Step 3: You’ll be asked to choose a template. Select blank template.
blank template.
Step 4: Now go to the project folder and run the below command to start the server.
cd "Your_Project_Name" npm start
Project Structure: It will look like the following.
Project Structure
Example 1: In this example, we will render a Text component in SafeAreaView component. And because we are using SafeAreaView component, it will avoid the rounded corners and notch of the physical device and renders the content perfectly on the screen.
App.js
import { StyleSheet, SafeAreaView, Text } from "react-native"; export default function App() { return ( <SafeAreaView style={styles.container}> <Text style={styles.title}>neveropen</Text> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#3B5323", }, title: { fontSize: 30, fontWeight: "bold", textAlign: "center", color: "#fff", }, }); |
Output:
Example 2: In this example, we will render a Button component in SafeAreaView component. And because we are using SafeAreaView component, it will avoid the rounded corners and notch of the physical device and renders the content perfectly on the screen.
App.js
import { StyleSheet, SafeAreaView, Button } from "react-native"; export default function App() { return ( <SafeAreaView style={styles.container}> <Button title="Press Me" color="#fff" onPress={() => { alert("Welcome to neveropen"); }} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#3B5323", }, }); |
Output:
Reference: https://reactnative.dev/docs/safeareaview
