zoontek / react-native-edge-to-edge

Effortlessly enable edge-to-edge display in React Native (formerly known as react-native-bars).
MIT License
442 stars 19 forks source link

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

Closed vikrvm closed 5 days 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" />

zoontek commented 5 days ago

This quirk is now explained in the README