How to hide the status bar in React native? Code Example

We can hide the status bar in React Native using hidden prop which can be applied on <StatusBar> component.

If this prop is set to true then the status bar hides from the application.

Code Example

import React, { useState } from 'react';
import { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native';


const App = () => {
  
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        hidden={true}
      />
      <Text style={styles.textStyle}>
        Status bar is hidden
      </Text>
      
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ECF0F1'
  },
  textStyle: {
    textAlign: 'center',
    marginBottom: 8
  }
});

export default App;

Output –

The above image show that there is no status bar in the application.

In the code we are setting the hidden prop in line 10.

Live Demo

Conclusion

To hide status bar we need to use hidden prop of StatusBar component and set it to true.