Conditional rendering of dragged item hover view when over specific receiver? (was: remove box logic)

[Bayramito]

How can I implement remove box logic like in instagram.

E.g. when i drag my item to the very bottom center of the screen, the item should scale down and stay in the remove box, and it will not move until my finger goes out of the box's boundry

[lafiosca]

Take a look at the renderHoverContent prop for rendering alternative views of a dragged item: https://github.com/nuclearpasta/react-native-drax-example/blob/25d7570c979a573db8b40a9427b41612590f6718/src/screens/ColorDragDrop.tsx#L213-L233

The renderHoverContent function is passed props including the viewState: https://github.com/nuclearpasta/react-native-drax/blob/dbedea923ff87860da1b3112f06387fe879ad091/src/types.ts#L168-L187

By specifying an id for your receiver, you should be able to check for that id and conditionally render the hover view based on whether you are dragging over that specific zone: https://github.com/nuclearpasta/react-native-drax/blob/dbedea923ff87860da1b3112f06387fe879ad091/src/types.ts#L420-L421 https://github.com/nuclearpasta/react-native-drax/blob/dbedea923ff87860da1b3112f06387fe879ad091/src/types.ts#L47-L50

Hope this helps and works for you. Please let us know. :)

[Bayramito]

First of all thank you for the explanation. But i think i could not ask the question as it should be, or i just could not understand your technique properly. The problem here is not the changing how my view will look like in the specified zone. If you using Instagram please try adding a story and some stickers to it, you will notice that these stickers movable around, scalable, zoomable, draggable.. And once you start dragging them you will see a trash at the very bottom of the screen and once you move your sticker in it, it becomes unmovable. BUT the pan gesture is continuing, when your finger goes out of the trash's box, then your sticker starts moving again. But when you are in it, the draggable item sticks to there, and of course scales down but this is easy. Thats the exact same behavior how i want

[lafiosca]

I don't use Instagram, sorry. But from what you are describing, I think you'd be able to calculate and adjust the offset of the hover view based on the position of the drag and the position of the receiver zone. By applying the correct math, you can make the hover view stay in a specific position while the drag is over the receiver.