craftzdog
December 5, 2022, 12:57am
2
Looks like KeyboardAvoidingView is not working as expected with the Japanese keyboard on Android
opened 06:26AM - 18 Dec 20 UTC
closed 01:51AM - 28 Dec 21 UTC
Stale
Platform: Android
Component: KeyboardAvoidingView
API: Keyboard
Needs: Triage
Please provide all the information requested. Issues that do not follow this for… mat are likely to stall.
## Description
KeyboardAvoidingView with `behavior="height"` is disabled when you type Japanese using Android's software keyboard.
## React Native version:
```
System:
OS: macOS 10.15.5
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 361.66 MB / 32.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.0 - /var/folders/xy/j6jq6cw161b_kx3nh9lxt8j00000gn/T/yarn--1608266098770-0.44488012666989385/node
Yarn: 1.22.4 - /var/folders/xy/j6jq6cw161b_kx3nh9lxt8j00000gn/T/yarn--1608266098770-0.44488012666989385/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2, 29.0.3
System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6308749
Xcode: 12.2/12B45b - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_265 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
```
## Steps To Reproduce
```tsx
import React from 'react';
import {KeyboardAvoidingView, TextInput, StyleSheet} from 'react-native';
const App = () => {
return (
<KeyboardAvoidingView behavior="height" style={styles.container}>
<TextInput placeholder="Username" style={styles.textInput} />
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
padding: 24,
flex: 1,
justifyContent: 'center',
},
textInput: {
height: 40,
borderColor: '#1c1c1c',
borderBottomWidth: 1,
marginBottom: 36,
},
});
export default App;
```
1. Use the software keyboard to input Japanese.
## Expected Results
The height will continue to be maintained even when you type Japanese.
Thanks for letting me know!
