react / react/react-native

KeyboardAvoidingView Android white area when keyboard open/close

Ouverte
#32,612 27 commentaires 19 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

API: Keyboard Component: KeyboardAvoidingView Needs: Triage :mag: Platform: Android
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Description

When using KeyboardAvoidingView on android, whatever the configuration I use for the behavior or the keyboardVerticalOffset I always have a white area when the keyboard is opening or closing while on iOS everything is moving smoothly.

https://user-images.githubusercontent.com/21194324/142198993-243f9d37-07ae-4b10-bc7d-2357867629fb.mp4

In the video, we can see that when the keyboard opens there is a big white area and when closing sometimes a small white rectangle with some flickering. I'm wondering if this is normal behavior because on iOS it transitions smoothly

I tried modifying android manifest with android:windowSoftInputMode="adjustResize" or android:windowSoftInputMode="adjustPan" but the problem is still there with both config.

It would actually be ok if we could change this color from white to something else like the background color of the content (red in my example). But I couldn't find a way.

Version

0.66

Output of react-native info

It happens from the documentation snack so I guess this section is not necessary

Steps to reproduce

Take the example from the KeyboardAvoidingView of react-native documentation and modify the background color of the container from white to red in order to see the white area when opening/closing the keyboard.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@flowwwww/keyboardavoidingview

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par reproduire sur Android l’exemple de KeyboardAvoidingView de la documentation, en utilisant le Snack lié, et testez le comportement signalé ainsi que les paramètres de keyboardVerticalOffset. Comparez adjustResize et adjustPan tout en observant la zone blanche et le scintillement ; le travail sera considéré comme terminé lorsque le comportement de transition signalé sera résolu ou que la manière prise en charge de contrôler la couleur de la zone sera clairement établie.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
android, react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.