Issues animating items between flat lists in expo-router

[oddanderson]

Project details

• Expo 51
• react-native-reanimated 3.10.1

I am able to successfully animate views using Animated.View sharedTransitionTag for the following situations:

• View inside FlatList -> Static view
• Static view -> Static view

However, the following isn't working

• View inside FlatList -> View inside FlatList

The app crashes however when I use sharedTransitionTag on an item in both source and destination screens.

Here are two videos demonstrating.

In the first video, the text that transitions is inside a FlatList item. However, the text on the destination screen is static and manually added to the screen.

In the second video, the card is inside a FlatList item on both source and destination screens. The animation "works" but after transitioning back to the source screen, the app becomes unresponsive and eventually crashes.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-21.at.08.30.36.mp4

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-21.at.08.29.37.mp4

My code is very simple, I am just using

<Animated.View sharedTransitionTag={item.id} ...>

I have verified that no items are duplicated in the FlatList, and I am also using expo-router, so I'm not able to use react-navigation-shared-element or creating a custom stack navigator with shared elements.

[oddanderson]

Here is the crash log

Thread 0 Crashed::  Dispatch queue: com.apple.main-thread
0   CoreFoundation                	       0x109849c60 -[__NSCFNumber compare:] + 12
1   CoreFoundation                	       0x1098491b4 -[__NSCFNumber isEqualToNumber:] + 20
2   CoreFoundation                	       0x109981258 mdict_removeObjectForKey + 164
3   FamilySage                    	       0x100e620a0 -[REASharedTransitionManager clearAllSharedConfigsForViewTag:] + 80 (REASharedTransitionManager.m:742)
4   FamilySage                    	       0x100e5e488 -[REASharedTransitionManager getSharedElementForCurrentTransition:withNewElements:withOffsetX:withOffsetY:] + 908 (REASharedTransitionManager.m:231)
5   FamilySage                    	       0x100e5ded4 -[REASharedTransitionManager configureAndStartSharedTransitionForViews:isInteractive:withOffsetX:withOffsetY:] + 144 (REASharedTransitionManager.m:183)
6   FamilySage                    	       0x100e60c40 -[REASharedTransitionManager runSharedTransitionForSharedViewsOnScreen:isInteractive:withOffsetX:withOffsetY:] + 260 (REASharedTransitionManager.m:571)
7   FamilySage                    	       0x100e60098 -[REASharedTransitionManager screenRemovedFromStack:withOffsetX:withOffsetY:] + 468 (REASharedTransitionManager.m:471)
8   FamilySage                    	       0x100e5fdf4 -[REASharedTransitionManager reanimated_viewIsAppearing:] + 292 (REASharedTransitionManager.m:442)
9   UIKitCore                     	       0x12bc3ea88 -[UIViewController __viewIsAppearing:skipWindowCheck:] + 168
10  UIKitCore                     	       0x12bc4f5d8 -[UIViewController viewDidMoveToWindow:shouldAppearOrDisappear:] + 312
11  UIKitCore                     	       0x12c89f3bc -[UIView(Internal) _didMoveFromWindow:toWindow:] + 1124
12  UIKitCore                     	       0x12c89f200 -[UIView(Internal) _didMoveFromWindow:toWindow:] + 680
13  UIKitCore                     	       0x12c894a90 __45-[UIView(Hierarchy) _postMovedFromSuperview:]_block_invoke + 120
14  UIKitCore                     	       0x12c8949a8 -[UIView _postMovedFromSuperview:] + 428
15  UIKitCore                     	       0x12c8a16b0 -[UIView(Internal) _addSubview:positioned:relativeTo:] + 2212
16  UIKitCore                     	       0x12c8676f0 -[UINavigationTransitionView transition:fromView:toView:] + 452
17  UIKitCore                     	       0x12bba7114 -[UINavigationController _startTransition:fromViewController:toViewController:] + 2452
18  UIKitCore                     	       0x12bba74e8 -[UINavigationController _startDeferredTransitionIfNeeded:] + 604
19  UIKitCore                     	       0x12bba83a0 -[UINavigationController __viewWillLayoutSubviews] + 92
20  UIKitCore                     	       0x12bb8eeac -[UILayoutContainerView layoutSubviews] + 168
21  UIKitCore                     	       0x12c8a666c -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 1492
22  QuartzCore                    	       0x10c1bef70 CA::Layer::layout_if_needed(CA::Transaction*) + 440
23  QuartzCore                    	       0x10c1c9d28 CA::Layer::layout_and_display_if_needed(CA::Transaction*) + 124
24  QuartzCore                    	       0x10c102f54 CA::Context::commit_transaction(CA::Transaction*, double, double*) + 460
25  QuartzCore                    	       0x10c132cd0 CA::Transaction::commit() + 652
26  QuartzCore                    	       0x10c1341a4 CA::Transaction::flush_as_runloop_observer(bool) + 68
27  CoreFoundation                	       0x109870df4 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 32
28  CoreFoundation                	       0x10986b7f8 __CFRunLoopDoObservers + 528
29  CoreFoundation                	       0x10986bcb0 __CFRunLoopRun + 968
30  CoreFoundation                	       0x10986b4d4 CFRunLoopRunSpecific + 572
31  GraphicsServices              	       0x1156abae4 GSEventRunModal + 160
32  UIKitCore                     	       0x12c381a28 -[UIApplication _run] + 868
33  UIKitCore                     	       0x12c3856b0 UIApplicationMain + 124
34  FamilySage                    	       0x100a29700 main + 96 (main.m:7)
35  dyld_sim                      	       0x104485544 start_sim + 20
36  dyld                          	       0x10462a0e0 start + 2360

[MatiPl01]

Hi!
Could you please provide a repro? I was trying to reproduce the issue locally but everything works fine. If you share your implementation, it would be very helpful to debug the issue.

[oddanderson]

Admittedly I spent this morning creating an exact reproduction, copying my code over and stripping out unnecessary portions, and I too am unable to reproduce in a fresh repo. I'm quite confused.

[oddanderson]

I have confirmed though that if I remove Animated from my code, everything works correctly, so the problem is isolated to the library in some way

[MatiPl01]

Thanks for details. You are right, that the react-native-reanimated is causing this crash (I can see REASharedTransitionManager in your crash log). If you can share code which caused this crash (even if it is hard to reproduce), it will be helpful.

[oddanderson]

@MatiPl01 here you go https://github.com/FamilySage/reanimated-demo/

Open app -> navigate to the paper icon tab -> tap in, go back, notice bugs clicking around