Avoid status bar overlap on all screens

Question

I want all screens on my app to appear below the status bar on both iOS and Android, so I\'d either have to add a StatusBar component or a paddingTop

Answer 1

Step 1: Import Platform and StatusBar

import { Platform, StatusBar} from 'react-native';

Step 2: Add this style in parent View

paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 

Full Code:

import React, { Component } from 'react';
    import {
      Text, View,
      Platform, StatusBar
    } from 'react-native';

    export default class App extends Component {
      render() {
        return (
          
            This is Text
          
        );
      }
    }