StatusBar background not being set & translucent=false not working

[Noitidart]

Is this a bug report?

Yes, re-filing #15301 with proper format

Have you read the Contributing Guidelines?

yes

Environment

Packages: (wanted => installed)
react-native: 16.0.0-beta.5 => 16.0.0-beta.5
react: 16.0.0-alpha.12 => 16.0.0-alpha.12

Target Platform: Android 4.4+

Environment:
OS: Windows 10
Node: 8.4.0
Yarn: 0.19.1
npm: 5.4.2
Watchman: Not Found
Error: unable to print environment info
{ Error: not found: xcodebuild
at getNotFoundError (C:\Users\Mercurius\Documents\GitHub\zindex\node_modules\which\which.js:13:12)
at Function.whichSync [as sync] (C:\Users\Mercurius\Documents\GitHub\zindex\node_modules\which\which.j
s:134:9)
at getXcodeVersion (C:\Users\Mercurius\Documents\GitHub\zindex\node_modules\envinfo\envinfo.js:17:25)
at Object.module.exports.print (C:\Users\Mercurius\Documents\GitHub\zindex\node_modules\envinfo\envinf
o.js:136:28)
at Object.info (C:/Users/Mercurius/Documents/GitHub/zindex/node_modules/react-native/local-cli/info/in
fo.js:17:13)
at Promise.resolve.then (C:/Users/Mercurius/Documents/GitHub/zindex/node_modules/react-native/local-cl
i/cliEntry.js:109:26)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:611:11)
at startup (bootstrap_node.js:158:16) code: 'ENOENT' }

Steps to Reproduce

(Write your steps here:)

People had different steps

My steps:

1. On Android of course, testing StatusBar.translucent on device is also giving undefined:

import { StatusBar } from 'react-native'

console.log('StatusBar.translucent:', StatusBar.translucent); // should be false - is undefined
StatusBar.setTranslucent(true);
console.log('StatusBar.translucent:', StatusBar.translucent); // should be true - is undefined

@markentingh steps

I tried posting a comment to closed bug #12618, but there is more to the bug than just background color. The translucency is not being set as well.

Running React Native 0.46.4 on Windows 10 in an Android emulator, emulating a Google Pixel phone with Android version 7. Also tested on Moto E 2nd Gen phone running Android 5.1

In the first screenshot, you can clearly see a translucent StatusBar with no background color, even though I set the translucent property to false & backgroundColor to "blue".

In the second screenshot, I set hidden to true, and the StatusBar did infact hide, so the component is working (somewhat).

@ArvoGuo steps:

Device: MIX 2
System Version: MIUI 8.5

only prop hidden work well

prop backgroundColor and barStyle doesn't work

code:

<View>
   <StatusBar
        backgroundColor="green"
        barStyle="dark-content" 
   />
</View> 

nothing happend!!!

Expected Behavior

StatusBar.translucent should return proper value

Actual Behavior

StatusBar.translucent should returns undefined

(Write what happened. Add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[Igorpollo]

Same here.
Is this a bug?
Some solution at the moment?

[dann1609]

Issue is related with devices whose use app compact an do not support this clase of styles.

[Noitidart]

Thanks @dann1609 for the confirmation of that. I didn't know that detail.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[zer0uno]

I'm facing the same problem on Android 6.0.1. The following snippets of code reproduce the same behavior, that is they have no effects on the status bar.

Only backgroundColor

render() {
    return (
      <View>
        <StatusBar hidden={false} backgroundColor="blue" />
        <Text>Hello World!</Text>
      </View>
    );
  }

Only translucent

render() {
    return (
      <View>
        <StatusBar hidden={false} translucent={true} />
        <Text>Hello World!</Text>
      </View>
    );
  }

Both backgroundColor and translucent

render() {
    return (
      <View>
        <StatusBar hidden={false} backgroundColor="blue" translucent={true} />
        <Text>Hello World!</Text>
      </View>
    );
  }

And this is what I get on my Android device:

It seems like the backgrounColor and translucent props are't working.

[jpotterm]

If you're using Expo, try configuring it in app.json instead: https://docs.expo.io/versions/latest/guides/configuring-statusbar