Skip to content

[Android] Incorrect height received in endCoordinates from 'keyboardDidShow' event #30191

@vigneshvpai

Description

@vigneshvpai

[Android] Incorrect height received in endCoordinates object from 'keyboardDidShow' event

Description

I have a button component with the position:"absolute" and bottom:0. I am trying to float this component over the keyboard using Animated API. It works fine in iOS for large and small devices. It doesn't work as expected in Android. Part of the button is covered by the keyboard in some devices. Few devices show result as expected.

React Native version:

System:
OS: macOS Mojave 10.14.4
CPU: (4) x64 Intel(R) Core(TM) i3-4150 CPU @ 3.50GHz
Memory: 18.41 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.4 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 27, 28, 29
Build Tools: 26.0.2, 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.0
System Images: android-27 | Android TV Intel x86 Atom, android-27 | Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.3.1/11C505 - /usr/bin/xcodebuild
npmPackages:
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Create an Animated.View in a screen (wrapped in SafeAreaView) with position:"absolute" & bottom:0
    { transform: [{translateY: keyboardMarginBottom}] } - style passed to the animated view.
  2. Handle keyboardDidShow event.
    const keyboardDidShow = ({endCoordinates: {height}}) => Animated.timing(keyboardMarginBottom, { duration: 250, toValue: -height, useNativeDriver: true, }).start();

Expected Results

I expect the view to float perfectly over the native keyboard. It doesn't work as expected in Zenfone Max Pro M2 (this has notch). It works as expected in Pixel 2 emulator in Android Studio.

Snack, code example, screenshot, or link to a repository:

wrong keyboard height android
right keyboard height android

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions