ReanimatedSwipeable use with flashlist

[web-iou]

Description

https://github.com/user-attachments/assets/5e58321b-71f4-4ad3-b90b-c9f3e0e964fb

Steps to reproduce

1.setup 2.Generate multi-page list data 3.Some menus scroll out on the home page 4.Turn down the page

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

none

Gesture Handler version

2.25.0

React Native version

0.78.0

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

New Architecture (Fabric)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug. section.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[latekvo]

Thanks for reporting, this is likely an issue with the FlashList moving items during scroll without resetting their Reanimated state properly.

Can you let me know if this issue still occurs after replacing FlashList with FlatList?

[web-iou]

Thanks for reporting, this is likely an issue with the FlashList moving items during scroll without resetting their Reanimated state properly.

Can you let me know if this issue still occurs after replacing FlashList with FlatList?

Yes i do

[web-iou]

Use flatlist has been solved

[latekvo]

This is expected behaviour of the FlashList, when dynamic elements are used within it, as documented here. You are expected to solve it by implementing useRecyclingState in the list component. If you're using the Swipeable directly within the FlashList, you have to wrap it with a View first. Once it's wrapped, and the useRecyclingState is implemented within said View, the callback provided to useRecyclingState will be called whenever the component's state should be reset. In said callback, you should call swipeableRef.reset().