React Native Safe Area


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