react / react/react-native

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

Open
#47,625 25 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

API: Keyboard Component: KeyboardAvoidingView Impact: Regression Issue: Author Provided Repro Needs: Attention Newer Patch Available
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproducer repository and run its KeyboardAvoidingView example on iOS, comparing React Native 0.75.2 with 0.76.1. Trace the KeyboardAvoidingView behavior across those versions and verify the result against the attached before-and-after videos. Done means the view follows the keyboard animation smoothly again after upgrading.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.