search

software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.88k stars 1.3k forks source link

Animated.View layout animations break with KeyboardAvoidingView #4815

Open joeporpeglia opened 1 year ago

joeporpeglia commented 1 year ago

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:

https://github.com/software-mansion/react-native-reanimated/assets/1399969/63272438-9903-4836-b742-3b84fb255b64

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 commented 1 year ago

Same problem!

zispidd commented 1 year ago

same problem

ivanfuzuli commented 1 year ago

+1

lewxdev commented 1 year ago

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

anckaertv commented 1 year ago

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

MatthewPattell commented 1 year ago

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

sregg commented 11 months ago

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

Same for me.

pluckyhd commented 11 months ago

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

borstessi commented 9 months ago

Receiving the same error using KeyboardAvoidingView with Expo SDK49

matheuscostadesign commented 8 months ago

Receiving the same error using KeyboardAvoidingView with Expo SDK49

Did you find any solution?

fellipe-ribeiro commented 8 months ago

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