StatusBar background not being set & translucent=false not working

Noitidart commented 6 years ago

Is this a bug report?

Yes, re-filing https://github.com/facebook/react-native/issues/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:

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 commented 6 years ago

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

dann1609 commented 6 years ago

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

Noitidart commented 6 years ago

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

stale[bot] commented 6 years ago

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 commented 6 years ago

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: screenshot_20180325-174012 It seems like the backgrounColor and translucent props are't working.