Usage of SafeAreaView and View in React native

In React native, View and SafeAreaView are used to display contents on screen.

Nowadays in market, every phones has common is camera notches; whether it is android or iOS devices. Notches means where punch-hole camera space available and rest whole screen covered with screen contents only.

For developers who used to build application; so it is responsibility for them to to design an application screen such as those contents should not cut-down and properly visible to users.

SafeAreaView can be used to display contents according to device space such as rounded corner or camera notches, sensor housing area. It adds padding from tool bar, navigation bar and tab bar.

Very important; SafeAreaView only application to iOS version 11 or later.

So you need to wrap your topmost view with SafeAreaView and add flex:1 for its effect.

Below image display with View usage.

View usage

Below image show with use of SafeAreaView.

SafeAreaView

Example :

import React from ‘react’;
import { StyleSheet, Text, SafeAreaView } from ‘react-native’;
const App = () => {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.text}>With Safeareview Page content</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
text: {
fontSize: 15,
fontWeight: ‘600’
}
});
export default App;

Thank you for reading, please hit clap button , share the content and post below for any queries.