-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Description
"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:
This is a Samsung A40:
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
- Create an animated value
this.moveUpValue = new Animated.Value(0);
- 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>
- Listen to the 'keyboardDidShow' event
Keyboard.addListener('keyboardDidShow', this.handleKeyboardDidShow)
- 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?