SafeAreaView in React Native and where to use it

Introduction :

If you know iOS development, then you must be aware of the term safe area. In react native, SafeAreaView component is used for iOS version 11 or later devices. It renders nested contents. So, this view is used as the parent of all views.

SafeAreaView renders nested content and automatically applies padding to reflect the nested contents that are not covered by navigation bar, tab bar, toolbar, and any other views. It handles all the sizes and types of screen like iPhone X.

Example :

You need to use flex: 1 with SafeAreaView. It can wrap with other subviews. For example :

import React from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'gray',
    flex: 1,
  },
});

You can also add any background color to match your application theme.