-
Notifications
You must be signed in to change notification settings - Fork 24.4k
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
KeyboardAvoidingView issue on android #30052
Comments
I tested and could not reproduce, but from the description seems to be the issue I solved with #29292 released with v0.63.3 the day after you published this issue the Sep 29, 2020 your example was built with 0.63.2 so probably the issue is fixed and will not try to reproduce it ... but if you give me some feedbacd, I'll give it a look. Thanks |
Summary: fixes #27089 fixes #30191 fixes #26296 fixes #24353 Related #30052 #28004 #26536 The keyboard height of event keyboardDidShow is computed as the difference of two variables: - The screen height excluding the Android Notch DisplayMetricsHolder.getWindowDisplayMetrics().heightPixels returns the screen height excluding the Android Notch - The Visible Area excluding the Keyboard, but including the Android Notch getWindowVisibleDisplayFrame() which returns the visible area including the Android Notch The computation of the keyboard height is wrong when the device has an Android Notch. This pr adds the Android Notch computation for API levels 28+ More info at #27089 (comment) ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Android] [Fixed] - Compute Android Notch in keyboardDidShow height calculation API 28+ Pull Request resolved: #30919 Test Plan: adding a ReactRootViewTest for keyboardDidShow verifying correct functionality on API < 28 **<details><summary>TEST CASE - BEFORE FIX</summary>** <p> **WITHOUT NOTCH** - The black view on the bottom is visible - The keyboard height is 282 | **Full Screen** | **Keyboard Did Show** | |:-------------------------:|:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/107212700-a1fd9d00-6a07-11eb-9248-26f9c4d92ae3.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/107212590-7975a300-6a07-11eb-89f4-891a37a7c406.png" width="300" height="" /> | **WITH NOTCH** - The black view on the bottom is **not** visible. The black view is not visible because keyboardDidHide is sending the wrong keyboard height value. - The keyboard height changes to 234. The keyboard height is the same from the previous test, but the value sent from keyboardDidHide changed for the Notch. | **Full Screen** | **Keyboard Did Show** | |:-------------------------:|:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/107212619-81cdde00-6a07-11eb-9630-7e7c8c34d798.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/107212707-a4f88d80-6a07-11eb-9134-f077059c83a6.png" width="300" height="" /> | </p> </details> **<details><summary>TEST CASE - AFTER FIX</summary>** <p> **WITH NOTCH** - The black view on the bottom is visible - The keyboard height is 282 | **Full Screen** | **Keyboard Did Show** | |:-------------------------:|:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/107212619-81cdde00-6a07-11eb-9630-7e7c8c34d798.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/107349053-0d0ea880-6ac8-11eb-9695-33128080b6b8.png" width="300" height="" /> | </p> </details> Reviewed By: ShikaSD Differential Revision: D31207989 Pulled By: cortinico fbshipit-source-id: 0955a3884201122166c5c0ae2aca988a0ed4af53
Issue is still viable on version react-native: 0.69.6 |
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
This issue was closed because it has been stalled for 7 days with no activity. |
Description
Keyboard changes view on input touch. It shows white blank when it’s moving to top. If you set backgroundColor: “red” for the root view you will see this white blank on keyboard show right. Please can somebody help me
React Native version:
react-native-cli 2.0.1
react native version: 0.63.2
react-dom: 16.13.1
Steps To Reproduce
import React from 'react';
import { StatusBar } from "expo-status-bar";
import {
View,
KeyboardAvoidingView,
TextInput,
StyleSheet,
Text,
Platform,
TouchableWithoutFeedback,
Button,
Keyboard,
} from 'react-native';
export default function KeyboardAvoidingComponent() {
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}>
Header
<Button title="Submit" onPress={() => null} />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid aperiam, architecto beatae
blanditiis consectetur consequatur cupiditate
dolores ex excepturi expedita necessitatibus nemo neque obcaecati omnis perspiciatis quibusdam suscipit.
<StatusBar style={"auto"}/>);}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "red"
},
inner: {
padding: 24,
flex: 1,
justifyContent: 'space-around',
},
header: {
fontSize: 36,
marginBottom: 48,
},
textInput: {
height: 40,
borderColor: '#000000',
borderBottomWidth: 1,
marginBottom: 36,
},
btnContainer: {
backgroundColor: 'white',
marginTop: 12,
},
});
Expected Behavior vs Actual Behavior
Expected Behavior: Keyboard must not change view nor show white blank when moving to top
Actual Behavior: Keyboard changes view and shows white blank when moving to top
The text was updated successfully, but these errors were encountered: