search

nuclearpasta / react-native-drax

A drag-and-drop system for React Native
MIT License
554 stars 69 forks source link

How to remove a tail like animation when the item is dropped after dragging #108

Closed fornyatech closed 3 years ago

fornyatech commented 3 years ago

Hi, could you please help in identifying how can I remove the animation which comes post repositioning the item in a list

lafiosca commented 3 years ago

Hi @fornyatech, please check out #83 and let me know if it helps.

lafiosca commented 3 years ago

Although I just realized you are probably talking about a DraxList so that might not quite help. I’m posting from my phone at the moment and can’t look in more detail right now.

lafiosca commented 3 years ago

Take a look at this...

In a standard DraxView, the prop animateSnapback can be set to false to disable the snapback animation: https://github.com/nuclearpasta/react-native-drax/blob/40c26004fca4dab87c8ac44c4462a3ef7ff8d0e2/src/types.ts#L246

In a DraxList, the prop viewPropsExtractor will allow you to specify a callback which returns partial props for the DraxViews used in the list: https://github.com/nuclearpasta/react-native-drax/blob/40c26004fca4dab87c8ac44c4462a3ef7ff8d0e2/src/types.ts#L891

So using those together, I think you could have something like:

<DraxList
    {...}
    viewPropsExtractor={() => ({ animateSnapback: false })}
/>

I don't have time to test this myself right now, but give it a shot and see if you can get it working. Please update this thread with your results. Good luck!

fornyatech commented 3 years ago

Hello Sir, yes this worked for my usecase and the snapback animation was successfully removed post dropping the item. This is what I used:

<DraxList viewPropsExtractor={() => ({ animateSnapback: false })} />

This npm module is one of the best out there. Didn't find any issue with this module. Thanks a lot! :D