Initializing usesharedValue in context causes strange behaviour in Flatlist

[LouisMuriuki]

Description

If i declare my useSharedValue in the context and pass it down to my component which will be rendered by a Flatlist, the gesture animation styles become automatically applied to all instances of my component. This results in a behaviour where i move all items of my Flatlist on pan gesture(not expected)

WhatsApp.Video.2024-04-08.at.8.01.56.PM.mp4

if i take the same usesharedValue and initialize them inside my component, then the gesture animation styles are applied as expected to the single component. This results in a behaviour where only the specific item on my Flatlist moves on pan gesture(expected)

WhatsApp.Video.2024-04-08.at.8.10.05.PM.mp4

issue is I need to use the shared value across different components to produce a uniform syncing animation.
is there something am missing ?

Steps to reproduce

1. Clone the reproducible and use this branch instead of main sharedValueContextIssue
2. Install dependencies and run
3. Tap on the button at the bottom or swipe the stacked cards

Snack or a link to a repository

https://github.com/LouisMuriuki/tinder-animation.git

Reanimated version

3.6.0

React Native version

0.73.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

Other (please specify)

Device

Real device

Device model

Huawei nova 7/ ios simulator

Acknowledgements

Yes

[tjzel]

Hi @LouisMuriuki. I haven't really got into the details of your reproduction, since it seems a bit burdensome. If you'd be so nice to make into a minimal reproducible example.

On the other hand, I might guess what the issue is. You probably update a shared value in gesture events callbacks while all components use the same shared value received via the context. You need separate shared values for this purpose.