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

KeyboardAvoidingView issue on android #30052

Closed
The098 opened this issue Sep 28, 2020 · 4 comments
Closed

KeyboardAvoidingView issue on android #30052

The098 opened this issue Sep 28, 2020 · 4 comments
Labels
API: Keyboard Component: KeyboardAvoidingView Needs: Triage 🔍 Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@The098
Copy link

The098 commented Sep 28, 2020

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

@fabOnReact
Copy link
Contributor

fabOnReact commented Feb 26, 2021

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

facebook-github-bot pushed a commit that referenced this issue Sep 28, 2021
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
@MarySnopok
Copy link

Issue is still viable on version react-native: 0.69.6

@github-actions
Copy link

github-actions bot commented Aug 2, 2023

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.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 2, 2023
@github-actions
Copy link

github-actions bot commented Aug 9, 2023

This issue was closed because it has been stalled for 7 days with no activity.

@github-actions github-actions bot closed this as completed Aug 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API: Keyboard Component: KeyboardAvoidingView Needs: Triage 🔍 Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
4 participants