expo: StatusBar styles can not be changed using StatusBar component

This bug is related to StatusBar styles and the StatusBar styles while a Modal is opened. A big question with full details was made in StackOverflow, here. All these behaviors are related to Android.

Environment

  Expo CLI 2.2.5 environment info:
    System:
      OS: macOS High Sierra 10.13.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 9.10.1 - ~/.nvm/versions/node/v9.10.1/bin/node
      Yarn: 1.12.1 - ~/.yarn/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v9.10.1/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 9.2/9C40b - /usr/bin/xcodebuild
    npmPackages:
      expo: ^31.0.0 => 31.0.2
      react: 16.5.0 => 16.5.0
      react-native: https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz => 0.57.1
    npmGlobalPackages:
      expo-cli: 2.2.5

  Diagnostics report:
    https://exp-xde-diagnostics.s3.amazonaws.com/brodanoel-1689fffb-32a9-4d5a-aa39-e27405a290b9.tar.gz

App Target: Android

Steps to Reproduce

Open https://snack.expo.io/BJR4oF4A7
Look for <StatusBar translucent={true} backgroundColor="#FFF" />
Change the translucent value to false.

You’ll see that none of the changes that you did, were applied. It’s always translucent, and it have not backgroundColor on #FFF

Expected Behavior

The StatusBar should change the translucent and the background

Actual Behavior

The StatusBar doesn’t change (it’s always translucent and black). It doesn’t matter which prop you set, it never changes

I made a big StackOverflow question describing the whole issue and the whole expected and current behavior: https://stackoverflow.com/questions/53437241/react-native-modal-is-not-drawn-below-the-statusbar-on-android/53463180?noredirect=1#comment93797863_53463180

Reproducible Demo

Even you can open this another Snack that sets the StatusBar to translucent={false}, but it always is translucent. (the red view is drawn behind the StatusBar)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 17
Comments: 41 (12 by maintainers)

Most upvoted comments

Experienced similar problem on Expo SDK 34 with iOS 12.4. No statusbar property is set in app.json.

Working:

StatusBar.setBarStyle
StatusBar.setHidden
<StatusBar hidden={true}>
<StatusBar barStyle='light-content'}>

Not Working:

StatusBar.setBackgroundColor
StatusBar.setTranslucent
<StatusBar backgroundColor='#000000'>

How did you guys get backgroundColor to work? @satya164

+15

athenawisdoms on Aug 16, 2019

the StatusBar problem appears in Expo 49

dincerdegre on Sep 6, 2023

improvements are coming in sdk 37 with https://github.com/expo/expo/pull/6506

brentvatne on Mar 9, 2020

It’s not about that status bar background color setting in app.json. It’s about these not working things (I copy from @athenawisdoms 's comment above):

StatusBar.setBackgroundColor
StatusBar.setTranslucent
<StatusBar backgroundColor='#000000'>

hungluu on Nov 20, 2019

I finally gave up using Expo long time ago because of this issue 😄 Still not fixed yet 👎

hungluu on Jul 31, 2019

@brentvatne I’ll check it. I’ve never got that API to work for anything other than background color and it probably doesn’t work when statusbar is translucent 🤔

satya164 on Mar 28, 2019

@brentvatne Same issue is happening on SDK 50

ipr0310 on Jan 22, 2024

Same issue happen on SDK 47

kirtikapadiya on Jan 13, 2023

Hello there 👋 As of SDK37 being out for a while and StatusBar API being fixed in this release and this StatusBar API snack is working, I’m closing this issue. If anyone is experiencing any other problems connected with this issue, please create a new issue with some reference to this one 😉

bbarthec on Apr 15, 2020

Same here, almost end of year 2019 but still no solution?

carlo-fontanos on Dec 28, 2019

Using expo 36 I can change status bar color on android using the app.json file as mentioned above. However the barStyle property doesn’t work, only the backgroundColor property.

So at the moment I have no way to change the barStyle with either app.json or <Statusbar/>

the-kenneth on Mar 9, 2020

This seems to have the same root cause as #5073. I believe we should wait for that issue to be resolved and see if it resolves this one as well.

mczernek on Nov 21, 2019

@brentvatne

it seems we need to improve https://docs.expo.io/versions/v32.0.0/guides/configuring-statusbar/ to document any quirks in the relationship between the app.json config and the statusbar api from react-native. i don’t actually have any faith that the upstream api even works as expected

We’re moving an app from vanilla RN to Expo. We’ve never had any issues with the upstream StatusBar API but after moving to Expo the only setting on the StatusBar component that seems to work is barStyle.

paldepind on May 15, 2019