Avoid Status Bar Overlap On All Screens

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 to all my screens. Is there a w

Solution 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:

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

    exportdefaultclassAppextendsComponent {
      render() {
        return (
          <Viewstyle={{paddingTop:Platform.OS === 'android' ? StatusBar.currentHeight:0 }}><Text>This is Text</Text></View>
        );
      }
    }

Solution 2:

You can create a <NavigationContainer/> component to hold all your different pages, so that you don't need to duplicate the StatusBar and padding code in every single screen component.

I created a example in here:　https://snack.expo.io/SyaCeMOwW

And nothing need to change in term of your navigation structure or redux flow.