Is it possible to implement item dragging as shown in the image?

[RouberR]

Hello! The library looks fantastic, but I wanted to ask if it is possible to implement item dragging functionality similar to the one shown in the attached image.

[MatiPl01]

Unfortunately, this is not possible, if you mean reordering of grid items that span across different columns or rows. Grid layout supports only items with different heights for now, but it doesn't mean that they span across different rows.

I may consider adding support for this in the future but I don't have an idea how reordering could work in this case if you try to swap an item occupying one column with an item that occupies 2 columns. Can you maybe describe me how you see that?

Btw, use the Discussions tab for questions and feature request instead of issues.

[RouberR]

@MatiPl01 Thank you for your response! Here’s how I imagine the behavior: If a 1-column item is dragged into a 2-column space, it could either:

1. Move downward, leaving empty space (grid "push" effect).
2. Swap entire columns with items.

I saw a similar approach in the react-native-drag-sort library, but it has bad animation, optimization and many bugs

P.S. Apologies for using Issues instead of Discussions — I’ll repost this there if needed.

[MatiPl01]

You don't have to move this question to discussions. I will not close the issue until we finish talking here. I just wanted to let you know that discussions are a better place for things like that.

Also thank you for letting me know about this library. I saw similar solutions but never came across this one.

You would likely want to create layout that in this library is called AnyThreeLayout. I think that you can now achieve a kind of similar result with the Sortable.Flex component by setting half of the parent container width on some views and the full width on other. It should work in a similar way.

I know that this is not ideal so I would likely implement some more developer friendly solution for this case in the future. For now, I am focusing on adding the web support. I may try implementing this grid layout with column spanning next.

[orca-adria]

HI @MatiPl01 and @RouberR , we have a self-maintained sortable grid that does this, it works in most of the cases but is quite complex and has issues sometimes. I came across this new library and my idea was indeed to use a Sortable.Flex and play around with the element's sizes to make it look like a grid. Will start working on it now, so I can tell you how it works.

In terms of the sortable grid with different sizes, @MatiPl01, let's talk if you want, this is what we have (look at the right screenshot, I just copied a before/after from a polish PR):

[MatiPl01]

Hi @@orca-adria!

Your grid implementation looks very cool!

In your case, the Sortable.Flex component won't work because you can have different number of elements one on top of another within the same row. I mean this case, where you have 2 small squares one on top of another and a single large square near them:

Sortable.Flex is implemented in such a way that it remains the Rect Native's flexbox layout calculation on the View (with different default values, like flexWrap={'wrap'} and flexDirection={'row'}. Your layout cannot be produced by React Native when all grid children are within the same parent component. It would require wrapping them within helper components with different flexDirection, which I don't support in the Sortable.Flex implementation.

When it comes to the grid with different item widths, I will appreciate if you can share your experiences. I am thinking about a few things here:

• how to determine which items are reordered (I think it works in a different way for different libraries. I got suggestion to implement it like this one, which works only on the web but it behaves in a different way when you try to swap items from different rows (you can play with it on their website and see how it works)
• if we should support any column widths or just a multiplier of a certain value (most of grids I found create a mesh, e.g. 12x12 and allow customization of item sizes based on the number of columns/rows at which it spans but I don't know if this is the best approach here)
• how do you maintain state? I mean, how you tell the grid where to place na item? Is that an array of positions in a grid or something else?

Thanks for any suggestions in advance!

[orca-adria]

Hi, thanks for your response, what a petty then, I was excited to try it out as the library looks very nice! The goal was to simplify our custom implementation as it's quite complex right now, but I see that maybe it's how it is 😅.

To determine which items are reordered I try to group the smaller ones to match a big one, in the case of your screenshot, the big one (4x4) would be swapped with the whole group in its right. Reorganization works quite well in that sense.

At the moment we support 1x1, 2x1, 2x2, 4x4,8x4 and 8x8 sizes in a grid that can be as big as 12x8.

The hardest part is in maintaining the state, especially when adding new elements to the grid. We basically have a persistence state in redux and in parallel a shared value with the same structure. Maintaining these in sync is the tricky part... We have an array of elements with some position information on it

ItemScale = {
  x: number;
  y: number;
};

ItemPosition = {
  pos: number;
  page: number;
  scale: ItemScale;
};

And on top of that, we also support landscape, which makes it even harder.

The app is called Orca, in case you want to check it out.

[MatiPl01]

Thanks for sharing information about your implementation and problems you enountered. I know that maintaining synchronization with state libraries can be tricky. Because of that I use absolute positioning of all grid items and don't show them until their positions are calculated. I think that I somehow got it working right with this approach.

Because grid layout with customizable item sizes was requested by many people, I would probably add it in the future. I think that I finished working on new features I wanted to add and there are no more feature requests for smaller things. I will release a new version of the library after I update docs and I would be able to start working on this complex grid within a few days.

[orca-adria]

Sounds good, let me know if I can help. We use position absolute under the hood too. The stack is very similar to yours: gesture handler and reanimated basically.

[weizhe412]

Tbh, I'm really looking forward to this feature. My app needs a widget-like home page that allows users to drag and sort widgets of different sizes (sm, md, lg).

Right now, I'm working around it by setting numberOfColumns={1} and using a medium (md) grid to contain two small (sm) grids.

[Lemon1903]

Hi @MatiPl01, thanks for all the work on this library!

I've been following the discussion on variable spans and wanted to share a behavior pattern that might be a great reference for how to handle this gracefully.

There is a web library called Swapy (https://swapy.tahazsh.com/) that handles "jagged" grids effectively. Its logic is slightly different: instead of items keeping their fixed dimensions when moved, they adopt the dimensions of the slot they are dropped into.

The Use Case: Imagine a 2x2 Grid:

• Row 1: [Item A (1x1)] [Item B (2x1)]
• Row 2: [Item C (2x1)] [Item D (1x1)]

Desired Behavior: If I drag Item A (the small square) from Row 1 into the position of Item C (the wide rectangle) in Row 2:

• Item A snaps into Item C's slot and expands to become 2x1.
• Item C moves to Item A's old slot and shrinks to become 1x1.

Basically, the grid structure (slots) stays static, but the content "pours" into the new container shape. This avoids the complex reflow logic where the whole grid has to shift to accommodate a dragged item's fixed size.

I think this "Slot-based" approach would be a great idea, what do you think?

[MatiPl01]

Hey @Lemon1903!

I saw this web library before and it looks very cool. I'd like to have something similar in my library but I didn't have time to implement it yet. I am quite busy recently with work and studies so I'd likely won't have much time for bigger features like this one in the near future.

If you want, you can contribute and try to implement the feature yourself.

Thanks for your comment!