React Native Notes 23: How to Translucent StatusBar?

The absolute way to make our StatusBar Translucent for both iOS and Android

Photo by Denys Nevozhai on Unsplash

This is what we want to achieve right? It looks elegant, simple and it should be easy to do. However, set the translucent to StatusBar prop sometimes does not work and makes us crazy.

Why do not you work!

And again, fortunately the solution is simple.

Code:

import { Platform, StatusBar } from 'react-native';

StatusBar.setBarStyle("light-content");
if (Platform.OS === "android") {
  StatusBar.setBackgroundColor("rgba(0,0,0,0)");
  StatusBar.setTranslucent(true);
}

Gist:

You need to check the operating system here because .setBackgroundColor and .setTranslucent methods only works on Android. iOS handles itself by default (Thank you Apple Engineers 😇)

What we achieved

After that, we got what we need for both iOS and Android.

Of course, you do not need to set bar style as light-content , you can change it depends on your design.

If you need an example for guidance, here you go:

WrathChaos/React-Native-Translucent-StatusBar-Example

All you need to do is;

• Clone the repo
• npm i
• react-native run-ios/android
• Check the code 😋

If you have a question, please ask me.