[Android 13+] barStyle prop of react-native-bars is not applied properly

[phuongphamx96]

Bug summary

[Android 13+] barStyle prop of react-native-bars is not applied properly Hi @zoontek, I got this problem in my project and I tried with the example in your lib. I think the status bar content style follows what I set in styles.xml after the splash screen was hidden. If it's true, when I kill the app and open it again, the status bar content style still dark-content regardless the value I set in barStyle prop is light-content. `

true

    <item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>`

The issue happens on Android 13+ only. I tested on lower versions and it's working as my expectation. Thanks. issue.webm

Library version

4.7.2

Environment info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 4.84 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/Library/Caches/fnm_multishells/1434_1687227067221/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/1434_1687227067221/bin/yarn
    npm: 9.5.1 - ~/Library/Caches/fnm_multishells/1434_1687227067221/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.10121639
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.7 => 0.71.7
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Open https://github.com/zoontek/react-native-bootsplash/blob/master/example/App.tsx
2. Change barStyle prop to light-content, change backgroundColor to a darker color (ex. '#000000')
3. It's okay now
4. Kill the app
5. Open the app again
6. The status bar is still dark-content

Reproducible sample code

...
const styles = StyleSheet.create({
  container: {
    ...
    backgroundColor: "#000000",
  },
  ...
  ...
  return (
    <View style={styles.container}>
      <SystemBars barStyle="light-content" />
      ...
    </View>
  );
};

[zoontek]

@phuongphamx96 I know that androidx.core:core-splashscreen try to do clever thing about system bars colors (and often mess up). I'm currently working to get rid of this package in react-native-bootsplash to solve this kind of issues.

Until then, I recommend applying your initial style like this: https://github.com/swan-io/swan-partner-mobile/blob/main/src/screens/AuthenticationScreen.tsx#L56

In this example, the logo is animated, but it can be simplified to:

React.useEffect(() => {
  const setSystemBarStyles = () => {
    NavigationBar.pushStackEntry({ barStyle: "dark-content" });
    StatusBar.pushStackEntry({ barStyle: "light-content" });
  };

  BootSplash.hide({ fade: true }).then(() => {
    // A weird issue occurs on Android 12+ on app restart
    Platform.OS !== "android" || Platform.Version < 12
      ? setSystemBarStyles()
      : setTimeout(setSystemBarStyles, 500);
  });
}, []);

[phuongphamx96]

@zoontek Great, thanks for your solution.