Animated.View layout animations break with KeyboardAvoidingView

[joeporpeglia]

Description

There seems to be some sort of conflict between reanimated and react-native layout animations. Any reanimated views that trigger a layout animation on text input focus/blur look buggy when a KeyboardAvoidingView is also rendered. The following console warning is also printed when this happens: Overriding previous layout animation with new one before the first began.

Related: KeyboardAvoidingView calls LayoutAnimation.configureNext(...) before adjusting the keyboard offset. https://github.com/facebook/react-native/blob/e64756ae5bb5c0607a4d97a134620fafcb132b3b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L146

Example video:

Simulator.Screen.Recording.-.iPhone.14.-.2023-07-25.at.14.12.43.mp4

Steps to reproduce

1. Run app from linked repository on an iOS simulator
2. Focus the text input (make sure keyboard is appearing on focus). Note the width animation on the red box
3. Change the SET_TRUE_TO_REPRO variable to true
4. Repeat step 2 - the animation no longer works as expected

Snack or a link to a repository

https://github.com/joeporpeglia/repro-reanimated-layout-animations

Reanimated version

3.3.0

React Native version

0.72.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14

Acknowledgements

Yes

[JMinayaT]

Same problem!

[zispidd]

same problem

[ivanfuzuli]

+1

[lewxdev]

Is there a workaround for this? I ran into the same problem

[anckaertv]

Same here, also have this warning when using LayoutAnimations with rn reanimated in //.

[MatthewPattell]

For me, it's fixed in 3.5.4 version. Thanks.

[sregg]

For me, it's fixed in 3.5.4 version. Thanks.

Same for me.

[pluckyhd]

I am still seeing this issue on IOS but not android.

[borstessi]

Receiving the same error using KeyboardAvoidingView with Expo SDK49

[matheuscostadesign]

Receiving the same error using KeyboardAvoidingView with Expo SDK49

Did you find any solution?

[fellipe-ribeiro]

I think the real problem is only with react-native's KeyboardAvoidingView on IOS.
This component plays an animation and there is no way to turn it off
The warning in the console even happens when using KeyboardAvoidingView with LayoutAnimation