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

[alexmngn]

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

ScreenRecording_11-14-2024.23-43-13_1.mov

After update, 0.76.1

ScreenRecording_11-14-2024.23-24-09_1.mp4

On the reproducer repo

Before update, 0.75.2

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-15.at.00.20.27.mp4

After update, 0.76.1

Untitled.mp4

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.76.2. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[migueldaipre]

Hey @alexmngn, thanks for opening this issue.

Does it happen with the new architecture too?

[alexmngn]

While testing version 0.76.1 on the reproduction repo, I tried both with and without the new architecture and could see the same issue in both cases.

[mhoran]

I've encountered a few issues with KeyboardAvoidingView since upgrading to 0.76. The first was due to a regression that was fixed in 0.76.1. The second is a bug in react-native-reanimated and New Architecture that seems to break onLayout, ultimately causing KeyboardAvoidingView to fail to calculate the correct height. The third is an issue with LayoutAnimation.configureNext(), which may be the root cause of this particular bug. (I've since discovered the LayoutAnimation.configureNext() issue seems to be related to react-native-reanimated.)

[simonsayz13]

I've updated to RN0.76.3 and still encountering this issue