react / react/react-native

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

Abierto
#47,625 25 comentarios 13 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

API: Keyboard Component: KeyboardAvoidingView Impact: Regression Issue: Author Provided Repro Needs: Attention Newer Patch Available
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con el repositorio enlazado para reproducir el problema y ejecuta su ejemplo de KeyboardAvoidingView en iOS, comparando React Native 0.75.2 con 0.76.1. Sigue el comportamiento de KeyboardAvoidingView en esas versiones y verifica el resultado con los vídeos adjuntos de antes y después. Se considera terminado cuando la vista vuelve a seguir suavemente la animación del teclado después de la actualización.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.