Different Widths

[lorenzogonnelli]

Hi!

First off, I just want to say that this library is absolutely awesome! This is exactly what React Native has been missing.

I’m a heavy user of grid libraries because I’ve built an app where the main feature is reordering widgets. I’ve been searching for a library like this, but so far, the only solution I’ve found is using a web-based library like Gridstack inside a WebView. While it works decently, it doesn’t provide the same smoothness as Reanimated, of course.

I’d love to start using this library, but I think one major feature it’s missing is the ability to have items with different widths, allowing for more flexible layouts—like the ones in these images:

Ideally, each item should have a width and height property that determines its size relative to a grid (e.g., width: 1 means it takes up one column). For example, if an item has width: 2, it would span two columns, and the same logic would apply to heights.

Since this library is still in its early stages, I know there’s a long road ahead—but I just wanted to say best of luck, and I’m excited to see how it evolves! 😃

[lorenzogonnelli]

I would also suggest adding the ability to load custom layouts. Since users can modify the order of items, they should see the layout in the same order when they revisit the page. Of course, it’s up to us to save the layout somewhere, like a database, but we would need a way to load it afterward.

To achieve this, I’d propose adding x and y default props to the item component to define its position relative to the grid.

For example, x: 0, y: 1 would place the item in the second row (y: 1), at the beginning (x: 0). Each row would have the same height as a single column unit.

[MatiPl01]

Hey @lorenzogonnelli

I am planning to start working on customizable grid items width in the next week once I finish adding web support and other smaller features that people requested. It may take some time to figure out a valid architecture and reach to the point at which it works as expected.

I appreciate your detailed description and suggestion on how to implement this feature.

[lorenzogonnelli]

that's great! thank you :)