Cells disappear when dynamically toggling CSS transition styles on Animated.View in FlashList (4.3.0 regression)

[alex-lanclos]

Description

After upgrading from 4.2.1 to 4.3.0, dynamically toggling CSS transition
properties (transitionProperty, transitionDuration) between values and
undefined on Animated.View used as a FlashList CellRendererComponent causes
cells to disappear permanently.

Environment:

• react-native-reanimated 4.3.0 (works correctly on 4.2.1)
• Expo SDK 55 / React Native 0.83.4
• @shopify/flash-list
• Android (not tested on iOS)

We use a custom CellRendererComponent for FlashList that toggles between two
animation modes via imperative refs:

• Presence mode (default): inner Animated.View has entering/exiting animations
• Layout mode (temporary): outer Animated.View has CSS transitions on top and
  opacity

Before a data change (inserting/removing items), we switch all visible cells
to layout mode so they animate smoothly into their new positions. After 700ms,
cells revert to presence mode.

<Animated.View
style={[
style,
{
transitionProperty: isLayoutMode ? ['top', 'opacity'] : undefined,
transitionDuration: isLayoutMode ? ['500ms', '500ms'] : undefined,
},
]}

<Animated.View                                          
  entering={isPresenceMode ? FadeInDown : undefined}
  exiting={isPresenceMode ? FadeOut : undefined}                            
>
  {children}                                                                
</Animated.View>                                                            

</Animated.View>

Steps to reproduce

1. Run the reproduction project on Android with reanimated 4.3.0
2. Tap "Insert item" — this switches visible cells to layout mode (CSS
   transitions enabled), inserts an item into the FlashList data, then reverts
   cells to presence mode after 700ms
3. Cells disappear and don't recover

What we isolated:

• Removing only entering/exiting animations: still broken
• Removing only CSS transition styles (all set to undefined permanently):
  fixes the issue
• Keeping CSS transitions always defined with static values (never toggling):
  works, but breaks scrolling since cells animate position during scroll
• Toggling only transitionDuration between '500ms' and '0ms' (keeping
  transitionProperty static): still broken
• Using FlatList instead of FlashList: works fine — the bug requires
  FlashList's cell recycling
• disableAnimations (plain View instead of Animated.View): fixes the issue

Conclusion: Any dynamic change to CSS transition style values on Animated.View
combined with FlashList cell recycling causes cells to permanently disappear.
This worked correctly in 4.2.1.

Snack or a link to a repository

https://github.com/alex-lanclos/reanimated-transition-bug

Reanimated version

4.3.0

Worklets version

0.8.1

React Native version

0.83.4

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Reanimated feature flags

None

React Native release level

None

Build type

No response

Device

No response

Host machine

None

Device model

No response

Acknowledgements

Yes

[MatiPl01]

Hey @alex-lanclos! I opened a PR that should provide a temporary fix (ideally I'd like to implement a better approach than this in the future, but the current one should work for now). Can you patch reanimated on your side and see if changes from the #9220 PR fix the issue?

[alex-lanclos]

Hey @alex-lanclos! I opened a PR that should provide a temporary fix (ideally I'd like to implement a better approach than this in the future, but the current one should work for now). Can you patch reanimated on your side and see if changes from the #9220 PR fix the issue?

This does seem to fix our issues that we were seeing locally