How to create a transparent StatusBar in React Native? Code Example

React Native provides translucent prop in StatusBar component which when set to true, allows the app to draw under it. With this prop, the statusbar becomes transparent.

We can also use some background color with alpha transparency.

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
        backgroundColor={'#fff000aa'}
        translucent={true} />
      <Button title="Button" />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#ECF0F1',
    height: 60
  }
});

export default App;

Output –

In the above image you will see that the button is under statusbar and is opaquely visible. This is due to the transparent background color. Also, since we have used translucent prop, so button is drawn under statusbar.

In the code we are using this prop in line 10

Live Demo

Conclusion

To draw the app under statusbar you need to provide translucent prop to StatusBar component in react native and set it to true. Then you can add a background color to the bar with some alpha transparency.