Android Action Bar visible

snicro commented 1 year ago

Bug summary

With React Native 0.67.1, Android API level 33 and react-native-bars 1.3.0 the Android ActionBar is visible even though it was hidden via react-navigation and NoActionBar theme before adding react-native-bars.

Library version

1.3.0

Environment info

System:
    OS: macOS 12.6
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 44.63 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.0.0 - /usr/local/bin/node
    Yarn: 1.22.17 - ~/.yarn/bin/yarn
    npm: 8.6.0 - /usr/local/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/silviustanut/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.2
      System Images: android-21 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64, android-33 | Google APIs Intel x86_64 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8092744
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.1 => 0.67.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Create a React Native 0.67.1 app
Use 'Theme.AppCompat.DayNight.NoActionBar' theme Android's styles.xml
Install react-navigation v6
Use { headerShown: false } option.
Install react-native-bars 1.3.0
Run on Android API level 33

Reproducible sample code

NA

zoontek commented 1 year ago

Hmmm, yes? Why would it be hidden?

snicro commented 1 year ago

Sorry, I was hasty in writing the issue and forgot to mention a critical step: using 'react-navigation' v6 and hiding the header/actionBar via react-navigation's { headerShown: false } option. Also using the 'Theme.AppCompat.DayNight.NoActionBar' theme in styles.xml. This works fine with react-native-bars up until api level 30. Starting with level 31, hiding the actionBar doesn't work after adding react-native-bars. I realize now that this is a compatibility issue and probably doesn't belong here. If you want to look into it or want other details let me know, but I'm fine with closing it.

Later edit:

It looks like react-native-screens (used by react-navigation) uses Toolbar (androidx.appcompat.widget.Toolbar) as ActionBar for header config. My Android knowledge is limited, so to workaround this for now I'm using this in my MainActiviy.java:

        RNBars.init(MainActivity.this, "dark-content"); // <- initialize with initial bars styles (could be light-content)
        RNBootSplash.init(MainActivity.this); // <- initialize the splash screen
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
          ActionBar actionBar = getActionBar();
          actionBar.hide();
        }

Please let me know if you think there's a better way to handle this.

zoontek commented 1 year ago

The example uses react-navigation and it doesn't occurs: https://github.com/zoontek/react-native-bars/blob/f0db2151e51650c3ff0b73de7b61eb480fd69cdb/example/App.tsx#L154

Be sure that you properly init all libs:

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(MainActivity.this); // bootsplash goes BEFORE super call
    super.onCreate(null); // called with null (required for react-native-screens)
    RNBars.init(this, "dark-content"); // bars goes AFTER super call
  }

snicro commented 1 year ago

Yes, indeed, the order of init was the problem. I now feel silly for not catching this difference.

Thank you for taking the time! Awesome job with the library 👏. I suspect most of us felt the need for a library like this at one point or another.

zoontek / react-native-bars