software-mansion / react-native-reanimated

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

Initializing usesharedValue in context causes strange behaviour in Flatlist #5879

Closed LouisMuriuki closed 2 months ago

LouisMuriuki commented 6 months ago

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)

https://github.com/software-mansion/react-native-reanimated/assets/42152260/41a76fae-095c-405e-8459-3778c7a2022d

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)

https://github.com/software-mansion/react-native-reanimated/assets/42152260/e74730c4-b5fd-4197-9dc2-4bf9149a1b90

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 commented 5 months ago

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.

szydlovsky commented 3 months ago

Hey @LouisMuriuki, have you checked @tjzel's idea? The issue got pretty stale..