CODEWITHSUNDEEP
androidreact-nativeexpo
Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24590

Why StatusBar.translucent not working in expo app

The header of my app is covered by the StatusBar on Android. Everything I do, I cannot make it to not be covered.

I tried:

<StatusBar translucent={false} />

and

StatusBar.setTranslucent(false)

But it doesn't have any effect.

More info:

Upvotes: 2

Views: 4554

Answers (2)

smbeiragh
smbeiragh

Reputation: 701

I was struggling with this issue for two hours. So I think this may help others.

@dondragon2's answer is correct to me. the point is when you set a color on statusbar, translucent turns off. I was struggling with this because I didn't know what exactly is happening and this had several side effects on my app. So I think this details may help others.

The issue:

Expo sets StatusBar translucent mode ON by default and any subsequent change via code has no effect.

Solution

Turn translucent mode off by setting the StatusBar color in app.json or expo.json in older versions. After that, you can change StatusBar configuration as mentioned in RN documents

Why

My idea is Expo goal is to make development easy and more cross-platform. Translucent mode is more similar to IOS so let's make it zero config by setting it as default and even you don't need to set a color because we set it as a gray layer for you! So, Expo assumes Setting a color means StatusBar is not transcluent. Do you want an opaque color? Set a color in app.json and watch it across application without any code and also translucent will turn off automatically. BUT, I don't understand why we can't turn off transcluent via code and using RN API!

Upvotes: 1

dondragon2
dondragon2

Reputation: 595

In your app.json or expo.json you can add these properties.

"androidStatusBarColor": "#00796a",
 "androidStatusBar": {
      "barStyle": "light-content",
      "backgroundColor": "#00796a"
 },

Upvotes: 1

Related Questions