SafeAreaView renders nested content and automatically applies paddings to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views

 

Syntax

<SafeAreaView style={{ flex: 1 }}>
  <View style={{ flex: 1, paddingHorizontal: 20 }}>
    Other component here
  </View>
</SafeAreaView>

 

Example

//Example of SafeAreaView in React Native

import React, {Component} from 'react';

//Import React

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

//Import basic react native components

 

export default class SafeArea extends Component {

  render() {

    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}}>

            This SafeArea Component is Used to hanlde the Padding and margins.

            This component mostly used in Ios.

          </Text>

        </View>

      </SafeAreaView>

    );

  }

}

 

 


Subscribe For Daily Updates