SafeAreaView box example in react native

• Create Components folder under src folder
• Add SafeAreaViewEXP.js file and add below Code

import React from "react";

import { Text, View, SafeAreaView } from "react-native";

export default function SafeAreaViewEXP() {

  return (

    <SafeAreaView style={{ flex: 1 }}>

      <View style={{ flex: 1, paddingHorizontal: 20 }}>

        <Text style={{ fontSize: 20 }}>

          Example of SafeArea in Recat Native

        </Text>

        <Text style={{ fontSize: 20 }}>

          Test Test Test Test Test Test Test Test Test Test Test Test Test Test

          Test Test Test Test Test Test Test Test Test Test Test Test Test Test

          Test Test Test Test Test Test Test Test Test Test Test Test Test Test

          Test Test Test Test Test Test{" "}

        </Text>

      </View>

    </SafeAreaView>

  );

}

• Open App.js file and update code as below

import React from 'react';

import { View,StyleSheet } from 'react-native';

import SafeAreaViewEXP from './src/Component/SafeAreaViewEXP'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <SafeAreaViewEXP/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: