CODEWITHSUNDEEP
androidreact-nativestatusbar
Giorgos Kartalis
Giorgos Kartalis

Reputation: 994

How to make StatusBar transparent?

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

NOT TRANSLUCENT, Transparent.

I am using react-navigation too.

Upvotes: 43

Views: 75899

Answers (10)

Taha Alizadeh
Taha Alizadeh

Reputation: 1

you should after

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

re-run the app again

Upvotes: 0

webDevSouli
webDevSouli

Reputation: 1

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
}

Upvotes: 0

balloon
balloon

Reputation: 91

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

However, 2 things to know:

  1. If you are using <Header /> component from react-native-elements, it already have <StatusBar /> included, using its statusBarProps instead.
  2. 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.
  3. Also android native code/config discussed in another stackoverflow topic solution will override by <StatusBar /> hence doesn't work well.

Upvotes: 4

Mouad Tahir
Mouad Tahir

Reputation: 509

This is working for me on android

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

Upvotes: 12

enestatli
enestatli

Reputation: 586

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.

Upvotes: 7

Felipe Rugai
Felipe Rugai

Reputation: 1388

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

<StatusBar translucent backgroundColor="transparent" />

Upvotes: 115

Rishi Singh
Rishi Singh

Reputation: 1

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.

Upvotes: -4

carlmagumpara
carlmagumpara

Reputation: 11

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

Upvotes: 0

Maulana Prambadi
Maulana Prambadi

Reputation: 1043

Try this to make transparent statusbar in android 

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

add display flex and paddingTop to your main View component

Upvotes: -2

ladder
ladder

Reputation: 229

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
}

Upvotes: 0

Related Questions