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 way to do this globally? Where is the appropriate top level component to add the StatusBar in a Redux app? (e.g. which part of https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample)?
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 (
<View style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }}>
<Text>This is Text</Text>
</View>
);
}
}