Skip to content

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

@vandrieu

Description

@vandrieu

"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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    API: KeyboardBugPlatform: AndroidAndroid applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions