zoontek / react-native-bars

Components to control your app status and navigation bars.
MIT License
292 stars 16 forks source link

`useAnimatedKeyboard` breaks status bar transparency #27

Closed ha3 closed 8 months ago

ha3 commented 8 months ago

Bug summary

The status bar loses its transparency when navigated to a screen that uses useAnimatedKeyboard from react-native-reanimated. Disabling keyboard handling during initialization of RNBars doesn't help either.

Library version

2.4.3

Environment info

System:
  OS: macOS 13.4
  CPU: (8) arm64 Apple M1
  Memory: 92.52 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.14.0
    path: ~/.nvm/versions/node/v18.14.0/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.3.1
    path: ~/.nvm/versions/node/v18.14.0/bin/npm
  Watchman:
    version: 2023.07.03.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.0
    path: /Users/hakan/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "30"
      - "31"
      - "34"
    Build Tools:
      - 28.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
    System Images:
      - android-29 | Intel x86 Atom_64
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: 32.1.12
IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.10121639
  Xcode:
    version: 14.3/14E222b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/hakan/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0
    wanted: 0.73.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

  1. Add a screen using useAnimatedKeyboard hook
  2. Navigate to that screen
  3. See that status bar is not transparent anymore

Reproducible sample code

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(null)
  RNBars.init(this, false)
}

Screen.tsx

import { useAnimatedKeyboard } from 'react-native-reanimated';

const Screen = () => {
  useAnimatedKeyboard();

  return <>...</>;
}
zoontek commented 8 months ago

@ha3 I see that this hook has a isStatusBarTranslucentAndroid option, did you set it to true? https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/hook/useAnimatedKeyboard.ts#L22C40-L22C69

It appears that reanimated is overriding the view margins when this is not set, this is not related to this library.

ha3 commented 8 months ago

Oops, I've totally missed that 🤦‍♂️. Thank you!