How to make StatusBar transparent?

Question

Does anyone know a way to make Android Status Bar transparent with React Native?

NOT TRANSLUCENT, Transparent.

I am using react-navigation too.

It becomes translucent and transparent. Meaning that the background gets under the Status bar. What I really need is that the status bar continues to exist (translucent="false") but with backgroundColor={'transparent'} it becomes a greyish color — Giorgos Kartalis, Sep 20 '18 at 14:42
take a look here https://github.com/react-navigation/react-navigation/issues/12 — Deividi Cavarzan, Sep 20 '18 at 14:45
I reviewed it tried most of examples there but no luck yet... — Giorgos Kartalis, Sep 20 '18 at 15:06
Make it translucent and add a padding top so that the status bar does in a way continue to exist — Rony Azrak, Mar 09 '19 at 20:43

Felipe Rugai · Answer 1 · 2020-09-04T02:29:12.240

105

Just use it like this: Tested with: "react-native": "0.60.4" and "0.61.5"

<StatusBar translucent backgroundColor="transparent" />

edited Sep 04 '20 at 02:29

answered Aug 18 '19 at 18:21

Felipe Rugai

1,289
1
8
14

3

I've tried this and it working fine in iOS but in android not (`StatusBar._updatePropsStack`: Color transparant parsed to null or undefined) – Akshay I Dec 23 '19 at 10:11
1

transparant or transparent? – Felipe Rugai Jan 02 '20 at 22:15
as per react native docs, https://reactnative.dev/docs/statusbar#translucent-android, translucent defaults to false, so you need to set as `translucent={true}` – funtkungus Jan 31 '22 at 22:36
As per React JSX [documentation](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true) setting `` or `` is the same thing. – Felipe Rugai Mar 22 '22 at 20:51

score 11 · Answer 2 · answered Jun 07 '21 at 20:44

11

This is working for me on android

<StatusBar
   backgroundColor="transparent"
   translucent={true}
/>

answered Jun 07 '21 at 20:44

Mouad Tahir

450
6
9

enestatli · Answer 3 · 2021-02-15T15:50:03.160

5

Unless you are using Statusbar as a component, try this method.

useFocusEffect(
    useCallback(() => {
      StatusBar.setBarStyle("dark-content");
      Platform.OS === 'android' && StatusBar.setBackgroundColor('transparent');
      StatusBar.setTranslucent(true);
    }, []),
  );

Do not forget to give some paddingTop to the most outer View.

edited Feb 15 '21 at 15:50

answered Feb 09 '21 at 11:54

enestatli

535
1
9
19

score 4 · Answer 4 · answered Sep 02 '21 at 07:34

<StatusBar translucent backgroundColor="transparent" /> is the way to go, thx to @Felipe Rugai

However, 2 things to know:

If you are using <Header /> component from react-native-elements, it already have <StatusBar /> included, using its statusBarProps instead.
If you are using WIX react-native-navigation, they have a separate way to dealing with the status bar, refer to this and this. They said it is incompatible with React Native's , however, looks like they work well together for me.
Also android native code/config discussed in another stackoverflow topic solution will override by <StatusBar /> hence doesn't work well.

score 0 · Answer 5 · answered Nov 30 '18 at 16:51

If you're talking about the status bar of the OS (the one you pull down to access wifi/bluetooth/settings etc), try adding this to you MainActivity.java:

private void hideNavigationBar() {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
}

And you can call that^ function in this function from the same MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    hideNavigationBar();
}

However, if you're talking about the StatusBar of the app, try adding this to your App.js file

static navigationOptions = {
    header: null
}

Both methods are useless. static navigationOptions = { header: null } this is supposed to hide toolbar/topbar not status bar. — hasn, Dec 19 '18 at 10:46

score 0 · Answer 6 · edited Jul 08 '22 at 04:35

0

This solution can solve the issue if you're working with expo in your package JSON /expo configuration: you can add a property to overwrite the default StatusBar for android

"androidStatusBar":{
    "translucent":false
}

edited Jul 08 '22 at 04:35

Vasily Kabunov

6,511
13
49
53

answered Jul 07 '22 at 12:56

webDevSouli

1
1

score -1 · Answer 7 · answered Sep 12 '19 at 09:35

-1

you can set it usingStatusBar.setBackgroundColor(Colors.TRANSPARENT);

answered Sep 12 '19 at 09:35

carlmagumpara

1
1
1

this not make any sence – x-magix Jul 06 '20 at 10:52

score -2 · Answer 8 · answered Dec 06 '18 at 09:57

-2

Try this to make transparent statusbar in android

container: {
      flex:1,
      paddingTop: 20
    },

add display flex and paddingTop to your main View component

answered Dec 06 '18 at 09:57

Maulana Prambadi

1,015
9
7

3

flex size & padding has nothing to do with status bar. – Leap Hawk Apr 19 '19 at 11:30

Rishi Singh · Answer 9 · 2020-03-23T06:40:33.767

-4

In react native, if you are using expo you can go to the app.json file and add status bar color. After this background color of the status bar for the complete app will change.

"androidStatusBar": {
  "backgroundColor": "#105846"
},

Check the linked page.

edited Mar 23 '20 at 06:40

answered Mar 15 '20 at 05:27

Rishi Singh

1
2

this seems to me as not even HEX color at all – x-magix Jul 06 '20 at 10:54

How to make StatusBar transparent?

9 Answers9

Linked