React-native: StatusBar background color is not being set on Android 7

[sattaman]

Description

StatusBar background color is not being set on Android 7

Reproduction

https://rnplay.org/apps/ELYWHg

Solution

StatusBar color should be applied in Android 7

Additional Information

• React Native version: 0.41
• Platform: Andriod 7.1
• Operating System: MacOS

[jjoe64]

is working for me in 0.42.0

[JonasWho]

+1 on this issue

[studiobrain]

+1 Nexus 6p on 7.1 is not rendering the backgroundColor (its grey)...
"react-native": "^0.44.0",

[sattaman]

I found it was set intermittently, sometimes working other times not. I set
it in the java source code and this has worked for me .

On Fri, May 19, 2017 at 8:20 PM, Josh Longbrake [e-mail]
wrote:

+1 Nexus 6p on 7.1 is not rendering the backgroundColor (its grey)...

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/12618#issuecomment-302789223,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABJBX2X7LYcWnDnUdv0KGLRSlhYguIglks5r7etwgaJpZM4MOYuM
.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[markentingh]

Unfortunately, I can reproduce this bug. Running React Native 0.46.4 on Windows 10 in an Android emulator, emulating a Google Pixel phone with Android version 7.

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).

[markentingh]

Hello? Will no one recognize that this is actually an existing bug?????? It even bugs out on my Motorola phone. Please fix this :)

[btrautmann]

I am also seeing this issue, tested on Android O (Pixel emulator) and Android 7.1.2 (Nexus 5X physical device). The actual desired color will be initially shown, but I can usually get it to change to grey by backgrounding app, waiting a while and re-launching the app.

        <StatusBar
          translucent={false}
          backgroundColor="rgb(122,77,246)" <-- Color that initially shows, but then changes to grey
          barStyle="light-content"
        />

[ollydixon]

I also have the same issue, randomly the status bar will be grey AND there will be extra space under it.

Cannot release app if this bug continues.

[btrautmann]

@voidstarfire so to avoid the spacing, I made my toolbar the same height as used in the F8 app and make the app status bar not translucent, defining it in the HIGHEST component possible. This makes it so your toolbar doesn't go behind your StatusBar, and there should never be spacing as it is a fixed height. I think the Highest Order component also helps as well.

 <Provider store={this.state.store}>
        <View style={commonStyles.container}>
          <StatusBar
            translucent={false}
            animated={false}
            hidden={false}
            backgroundColor="rgb(122,77,246)"
            barStyle="light-content" />
          <AppWithNavigationState />
          <PushNotificationController />
        </View>
      </Provider>

This helped me avoid the spacing issue. Now, in order to avoid the grey status bar, I think this is caused by a bug on Android launchers actually (I experienced it earlier because I'm an Android developer). To reproduce it, install your app (sometimes it does it on first install). Then, background the app, drag the app icon to your launcher and click it. What this does is it actually launches the main launcher Intent OVER your already existing app. You can now click back and expose your actual app that still exists behind that new Intent. To solve this, go into your MainActivirty.java within the Android project, and implement onCreate like so:

    // Fixes a launcher bug that causes launcher Activity to be shown over
    // current screen when launching app after backgrounding it
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (!isTaskRoot()) { 
            Intent intent = getIntent(); 
            String action = intent.getAction(); 
            if (intent.hasCategory(Intent.CATEGORY_LAUNCHER) && action != null && action.equals(Intent.ACTION_MAIN)) { 
                finish(); 
                return; 
            } 
        }
    }

This will help to dismiss the incorrect Activity and show the appropriate one, with the correct status color. Let me know if it works!

[hramos]

Since this issue was closed due to lack of activity and the original post doesn't have as much information as we now require, I recommend opening a new issue and filling out the template in its entirety. Feel free to copy over any new information that has been posted here since it was closed.

[ollydixon]

@btrautmann works perfect, thanks very much.

[btrautmann]

You got it @voidstarfire!!

[aishbetu]

It's not working because android 7 has transparent statusBar just like iOS. To check just change the backgroundColor of your view component and it'll change the color of the statusBar as well.