react / react/react-native

KeyboardAvoidingView mistakingly adds white space on screen bottom after being untangled

Ouverte
#29,614 97 commentaires 61 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

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

Description

[Description]

I wrapped a view as a footer inside KeyboardAvoidingView. It works properly before the keyboard has been untoggled. However, after the keyboard is untoggled, it adds a white space on the bottom of the screen. The height of the white space is as big as the keyboardVerticalOffset. This white space shouldn't exist.

React Native version:

System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Memory: 28.43 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.1 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.5 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 14.0.1 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ~16.11.0 => 16.11.0
react-native: https://github.com/expo/react-native/archive/sdk-38.0.1.tar.gz => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Use KeyboardAvoidingView, set keyboardVerticalOffset to any value
  2. Put a view inside KeyboardAvoidingView, set the position as absolute, and set the bottom to 0

Expected Results

The white space for keyboardVerticalOffset should only exist when the keyboard is toggled.

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

<KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      keyboardVerticalOffset={48}
      style={{width: "100%",
                   height: "100%",
                   position: "absolute",
                   zIndex: 1,}}
>
      <View
              style={{width: "100%",
                            position: "absolute",
                            height: 56,
                            bottom: 0,}}
      >
              <SubmitButton/>
       </View>
</KeyboardAvoidingView>

Artboard

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 l’exemple fourni de KeyboardAvoidingView sur iOS, avec behavior défini sur padding ou height et keyboardVerticalOffset défini sur 48. Inspectez l’implémentation de KeyboardAvoidingView et vérifiez que l’espace inférieur n’apparaisse que lorsque le clavier est visible, puis confirmez que le footer fourni, positionné en absolu, se comporte correctement après la fermeture du clavier.

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

Évaluation

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

Recevez les nouvelles issues par e-mail

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