A feature where, when an item is dragged, the other items gather around it..

[devtm1123]

First, thank you for this awesome library!!

As the title says, I've been trying to implement a feature where, when an item is dragged, the other items gather around it but am having a difficulty.

This video shows what I want to implement

RPReplay_Final1751333331.MP4

and this is what I've done so far....

Screen.Recording.2025-06-30.at.10.24.58.PM.mov

Do you think this is possible using this library?

[MatiPl01]

Hey @devtm1123!

I think that it is not possible yet but I fell that I would be able to add support for this in the next release. I hope that I would be able to publish a next release this weekend when I finish working on some other things that I am currently working on.

[devtm1123]

That would be awesome!! I'm looking forward to implementing it! Thank you very much :)

[iCodePup]

Hey , interested too ☺️, I think its on the way with #425

[MatiPl01]

@iCodePup I still need some time to get it working right. I hope it will be finished soon.

[MatiPl01]

Hey guys! Just letting you know that I am still working on this feature. It turned out to be much more complex to get it working right with other features that I support but I am getting closer and I hope to release a new version with this feature this weekend. I will let you know once it is ready.

You can see how it works in recordings in this PR: #451

I am currently working on the last one thing - correct autoscroll behavior. You can see how it works now here (it scrolls too far): #453 (comment)

Let me know if the current state looks as expected and whether you have any concerns or suggestions what can be changed/improved.

[iCodePup]

So cool, thanks for the update! The current behavior already looks really promising. Really looking forward to trying the new version once you release it :)

[devtm1123]

Looks amazing! Keep up the good work 👍

[MatiPl01]

Hey guys! Sorry for the long delay but I finally released the new version of the library that adds support for the collapsible items. You can refer to this example in the example app to see how it works.

The example might seem a bit complex as it serves the vertical and horizontal grid and also uses a bit different approach on the web as layout animations from Reanimated aren't working well on the web.

In short, to enable collapsible items support, you have to follow these steps:

1. Add the autoAdjustOffsetDuringDrag prop to the Sortable.Grid component - it enables the calculation of the additional offset added to item when they collapse
2. Use the React's state to switch between the collapsed and expanded state (e.g. just use a boolean true/false value)
3. Make use of the onDragStart and onActiveItemDropped (this one must be used instead of the onDragEnd) to collapse/expand items (to change the state value to true/false).
4. Change the width/height of grid items based on the collapsed state (this must be changed immediately without animation as the final size of the item must be known right away)
5. If you want a smooth animation of the item's dimensions, you can use the LinearTransition layout animation on the view which size is changed.

---

Please let me know what do you think about this implementation once you test it. I am also open to any suggestions if the current API is too complex and you have ideas how to simplify it.

[MatiPl01]

One more thing, I wasn't able to sync the layout change with the scrollable position change when items expand back to their normal dimensions. I was looking at the React Native source code and it seems that scroll events are queued and dispatched independently. Because of that, you may sometimes experience a little flickering if you decide to use the auto scroll feature together with the collapsible items. I couldn't make it better and have no idea how to improve it.

[devtm1123]

Thank you for the update! I'll try implementing it and let you know :) Appreciate that 💪

[devtm1123]

Hey @MatiPl01, I finally had a chance to implement it. It works great! The current API isn't complex at all. And I haven't found any issues related to the flickering problem. Amazing work :) I could implement everything I wanted to, thanks to this library. Thank you very much, @MatiPl01 👍💪👌

[MatiPl01]

Tank you @devtm1123 for letting me know! Good to hear that it work fine for you!