1<StatusBar animated={true} backgroundColor="#fff" barStyle="dark-content" />
1<View>
2 <StatusBar backgroundColor="blue" barStyle="light-content" />
3 <View>
4 <StatusBar hidden={route.statusBarHidden} />
5 ...
6 </View>
7</View>
8
1adding following code to the root view tag of your component =>
2paddingTop:StatusBar.currentHeight
1import React from 'react';
2import { Text, View } from 'react-native';
3import { StatusBar } from 'expo-status-bar';
4
5export default class App extends React.Component {
6 render() {
7 return (
8 <View
9 style={{
10 flex: 1,
11 backgroundColor: '#000',
12 alignItems: 'center',
13 justifyContent: 'center',
14 }}>
15 <Text style={{ color: '#fff' }}>Notice that the status bar has light text!</Text>
16 <StatusBar style="light" />
17 </View>
18 );
19 }
20}
21