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

Keyboard height is wrong on some android devices (causing the keyboard to show over text inputs) #26536

Closed
vandrieu opened this issue Sep 23, 2019 · 3 comments
Labels
API: Keyboard Bug Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@vandrieu
Copy link

"Keyboard.height" is not returning the right value, causing the keyboard to be displayed on top of text inputs even when handled with a translateY transform.

It works on all iOS devices and it works on most Android devices, but on some Android devices, the event.endCoordinates.height value is wrong, causing the text input to be partially hidden.

This is a Huawei P20 Pro:

IMG-20190425-WA0006

This is a Samsung A40:

IMG-20190916-WA0001

React Native version:

info
React Native Environment Info:
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Memory: 1.35 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.0 - /usr/local/bin/node
npm: 6.9.2 - ~/.npm-global/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
IDEs:
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

  1. Create an animated value
this.moveUpValue = new Animated.Value(0);
  1. Use it to define how the view will be translated to the top when the keyboard will appear:
<Animated.View style={{ transform: [{ translateY: this.state.moveUpValue }] }}>
</Animated.View>
  1. Listen to the 'keyboardDidShow' event
Keyboard.addListener('keyboardDidShow', this.handleKeyboardDidShow)
  1. When it's fired, start the Animated.Value from 0 to -keyboardHeight to move the main view up (there are better ways to handle it, but that's not the point, I'm just trying to keep it simple here)
handleKeyboardDidShow = (event) => {
	Animated.timing(
		this.state.moveUpValue,
		{
			toValue: -event.endCoordinates.height,
			duration: 200,
			easing: Easing.linear
		}
	).start();
}

I expect the view to be translated to the top so that the bottom of the view is at the top of the keyboard. It works as expected on all iOS devices and on most Android devices, but on some Android devices, it doesn't.

How do we deal with that?

@tominou
Copy link

tominou commented Oct 19, 2019

Same issue here, depending on the keyboard the user installed

@stale
Copy link

stale bot commented Jan 19, 2020

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 19, 2020
@stale
Copy link

stale bot commented Jan 26, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Jan 26, 2020
@facebook facebook locked as resolved and limited conversation to collaborators Jan 27, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API: Keyboard Bug Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

3 participants