[android] Reanimated LayoutAnimations break RN LayoutAnimation

[computerjazz]

Description

Including a single Reanimated layout animation breaks all further react-native layout animations on android. The Reanimated LayoutAnimation api is nice for some use cases, but React Native's own LayoutAnimation api is very convenient for others—for example, layout animations that don't need to be configured per-component. Ideally we'd be able to use both apis where convenient.

Steps to reproduce

1. Open app on android
2. Trigger a react-native layout animation (works)
3. Trigger a reanimated layout animation (works)
4. Trigger the same react-native layout animation (does not work)

https://user-images.githubusercontent.com/6730148/199092358-5dbef748-f718-4ec7-a005-12f5a39a19dd.mp4

Snack or a link to a repository

https://snack.expo.dev/@easydan/layoutanimation-broken?platform=android

Reanimated version

2.9.1, 2.11.0

React Native version

0.68.2, 0.69.5

Platforms

Android

JavaScript runtime

No response

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

No response

Device

No response

Device model

Google Pixel 5a

Acknowledgements

Yes

[computerjazz]

I found a hacky workaround by disabling reanimated's layout animations while react-native is in progress:

function triggerRNLayoutAnimation() {
        enableLayoutAnimations(false)
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
        // 250ms found by trial and error -- smaller values would cause animations not to run
        setTimeout(() => enableLayoutAnimations(true), 250)
}