react-native-reanimated
react-native-reanimated copied to clipboard
Initializing usesharedValue in context causes strange behaviour in Flatlist
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
- Clone the reproducible and use this branch instead of main
sharedValueContextIssue
- Install dependencies and run
- 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
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.
Hey @LouisMuriuki, have you checked @tjzel's idea? The issue got pretty stale..