barStyle prop from Statusbar Component stopped working

[PartypayNL]

Bug summary

Implementing react-native-bootsplash broke the barStyle prop from the Statusbar component. Other props like backgroundColor seem to be working fine. Uninstalling react-native-bootsplash fixes this issue.

https://reactnative.dev/docs/statusbar

Library version

4.1.0

Environment info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 8.62 GB / 15.96 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.3.2 - ~\AppData\Roaming\npm\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.18362.0
  IDEs:
    Android Studio: Version     2021.1.0.0 AI-211.7628.21.2111.8092744
    Visual Studio: 16.7.30611.23 (Visual Studio Community 2019)
  Languages:
    Java: 17.0.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.1 => 0.67.1
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Implement library
2. Import statusbar component from react-native
3. render statusbar component with barstyle prop

Reproducible sample code

<StatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0.5)"/>
<StatusBar barStyle="dark-content" backgroundColor="rgba(255,255,255,0.5)"/>

[zoontek]

@PartypayNL Included RN StatusBar component does not use AndroidX. You have to use https://github.com/zoontek/react-native-bars instead.

[zoontek]

Everything will work once this fix will be released: https://github.com/facebook/react-native/commit/50c8e973f067d4ef1fc3c2eddd360a0709828968

As you can see in the commit message:

Apparently, once you call setSystemBarsAppearance Android will no longer respect systemUiVisibility and if anyone, such as the Android 12 Splash Screen library, happens to call it, it will break status bars.

Which is done by the AndroidX Splash screen module: https://github.com/androidx/androidx/blob/androidx-main/core/core-splashscreen/src/main/java/androidx/core/splashscreen/ThemeUtils.kt#L43

Until then, react-native-bars works correctly.

[FadiAboMsalam]

@zoontek i applied the patch to my current RN version which is 0.67.4 but it didn't fix the issue any suggestions other than installing react-native-bars for this ! i don't like the idea of adding a dependency to achieve functionality which is supported out of the box 🤔

[gabrieldonadel]

Everything will work once this fix will be released: facebook/react-native@50c8e97

As you can see in the commit message:

Apparently, once you call setSystemBarsAppearance Android will no longer respect systemUiVisibility and if anyone, such as the Android 12 Splash Screen library, happens to call it, it will break status bars.

Which is done by the AndroidX Splash screen module: https://github.com/androidx/androidx/blob/androidx-main/core/core-splashscreen/src/main/java/androidx/core/splashscreen/ThemeUtils.kt#L43

Until then, react-native-bars works correctly.

@zoontek do you mind reopening this issue? I'm facing this very same problem in a project using react-native 0.69.1

[zoontek]

@gabrieldonadel With 4.2.3?

[gabrieldonadel]

@gabrieldonadel With 4.2.3?

Thanks for the quick response @zoontek, but unfortunately yes, I'm experiencing this in a project using "react-native-bootsplash": "^4.2.3" and "react-native": "0.69.1".

As soon as my splash screen gets hidden the StatusBar text becomes white

https://user-images.githubusercontent.com/11707729/176952387-a394e1c8-2272-4c57-90c0-967e234e8828.mov

[zoontek]

@gabrieldonadel With 4.2.3?

Thanks for the quick response @zoontek, but unfortunately yes, I'm experiencing this in a project using "react-native-bootsplash": "^4.2.3" and "react-native": "0.69.1".

As soon as my splash screen gets hidden the StatusBar text becomes white

Screen.Recording.2022-07-01.at.15.36.42.mov

Can you publish your styles.xml files?

[gabrieldonadel]

@gabrieldonadel With 4.2.3?

Thanks for the quick response @zoontek, but unfortunately yes, I'm experiencing this in a project using "react-native-bootsplash": "^4.2.3" and "react-native": "0.69.1". As soon as my splash screen gets hidden the StatusBar text becomes white Screen.Recording.2022-07-01.at.15.36.42.mov

Can you publish your styles.xml files?

Sure, here is the styles.xml file

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="android:textColor">#000000</item>
        <!-- Added to prevent an issue when using underlineColorAndroid property on TextInput
            See https://github.com/facebook/react-native/issues/17530 for more information -->
        <item name="android:editTextBackground">@android:color/transparent</item>
    </style>
    <style name="BootTheme" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
        <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
        <item name="postSplashScreenTheme">@style/AppTheme</item>
    </style>
</resources>

and here is the colors.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="blue">#2fb2fd</color>
    <color name="white">#ffffff</color>
    <color name="black">#191D24</color>
    <color name="colorAccent">#2FB2FD</color>
    <color name="bootsplash_background">#FFFFFF</color>
</resources>

[zoontek]

@gabrieldonadel As you don't seem to set the initial status bar style in your XML, I assume you did it in JS, on the first screen (StatusBar, dark-content)?

Could you create a small repository with a fresh project so I can debug it?