zoontek / react-native-bars

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

After adding RN Bars, items under the Android keyboard move up. Removing this package fixes the issue. #18

Open vikrvm opened 1 year ago

vikrvm commented 1 year ago

Bug summary

A bizarre bug occurs when installing RN bars. On my login screen, I have components that are spaced apart. On Android, this will move up the bottom component when the keyboard is presented. iOS is fine. I've tracked the issue to this package by starting a fresh React Native project and setting up just one screen with these packages.

I've followed the sets on both platforms to set this up. But at this time I've had to remove it to prevent Android from malfunctioning.

Here is a video on the behavior.

https://imgur.com/a/P0xmuKN

Library version

1.3.0

Environment info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.45 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.1 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 8.19.2 - /opt/homebrew/opt/node@16/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /Users/vikrampal/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8815526
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 18.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.70.6 => 0.70.6 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Reproducible sample code

Video provided. A screen in a stack with two items spaced apart.
dppo commented 1 year ago

add this can Solve this problem

import {StatusBar} from 'react-native';

<StatusBar translucent={true} backgroundColor="transparent" barStyle="dark-content" />