react / react/react-native

[0.76] `KeyboardAvoidingView` animation issues since 0.76+ upgrade

Ouverte
#47,625 25 commentaires 13 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

API: Keyboard Component: KeyboardAvoidingView Impact: Regression Issue: Author Provided Repro Needs: Attention Newer Patch Available
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Description

I've updated my project from 0.75.2 to 0.76.1 this morning, and I noticed that the KeyboardAvoidingView, which was previously animating properly, is no longer animating. It now jumps and doesn't follow the keyboard animation.

Not sure why in my project it doesn't work, but while creating the reproduction repo, I noticed the animation behaviour has changed and doesn't look native smooth anymore.

Steps to reproduce

Any new project with KeyboardAvoidingView

React Native Version

0.76.1

Affected Platforms

Runtime - iOS

Output of npx react-native info
System:
  OS: macOS 15.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 157.52 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.11.0
    path: ~/.nvm/versions/node/v22.11.0/bin/node
  Yarn:
    version: 1.22.17
    path: ~/.npm-global/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v22.11.0/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/Alexis/.rbenv/shims/pod
Stacktrace or Logs
No crash
Reproducer

https://github.com/alexmngn/reproducer-react-native-keyboard-avoiding

Screenshots and Videos
On my project

Before update, 0.75.2

https://github.com/user-attachments/assets/5089cd4d-fb2f-4bde-9a9b-a7790b989c23

After update, 0.76.1

https://github.com/user-attachments/assets/60bc6d95-c444-4492-887b-cdb7d4e562d1

On the reproducer repo

Before update, 0.75.2

https://github.com/user-attachments/assets/83df6cab-b4c4-4698-a458-291ab37f982c

After update, 0.76.1

https://github.com/user-attachments/assets/8fa6d39c-88af-4527-b41c-d7ae2bc8e7a2

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 le dépôt de reproduction lié et exécutez son exemple KeyboardAvoidingView sur iOS, en comparant React Native 0.75.2 à 0.76.1. Suivez le comportement de KeyboardAvoidingView dans ces versions et vérifiez le résultat par rapport aux vidéos jointes avant et après. Le travail est considéré comme terminé lorsque la vue suit à nouveau fluidement l’animation du clavier après la mise à niveau.

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

Évaluation

Stack technique
react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
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.