Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
vigneshvpai opened this issue Oct 16, 2020 · 1 comment
Labels
API: Keyboard Needs: Triage 🔍 Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@vigneshvpai
Copy link

[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

@fabOnReact
Copy link
Contributor

fabOnReact commented Dec 30, 2020

@Azimuthal444 is this caused by the SafeAreaView and using a phone that has a notch?
what does this change in keyboardDidShow event do? https://github.com/facebook/react-native/pull/29292/files Thanks

@facebook facebook locked as resolved and limited conversation to collaborators Sep 28, 2022
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API: Keyboard Needs: Triage 🔍 Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants