I'm working on a React Native project where I want to implement a layout that has auto placing functionality while fitting all the children as tightly as possible. It just happens that CSS has a wonderful feature that allows grids to autoplace children, sadly React Native doesn't support CSS grid. I've seen a variety of React packages that seem to do this, but there's no implementation for React Native. Examples for React are: react-grid-layout, Muuri, bin-packing-grid. I have managed to get the items sorted using a binary packing algorithm, but the visualization is still an issue I can't seem to get working.

My question: is there a package for React Native that can do this or is there an algorithm for the visualization of a binary packed item array that works on React Native?

The grid should be able to auto place children as following. https://i.ibb.co/H72mXRG/Whats-App-Image-2022-07-09-at-2-05-23-AM.jpg

I also thought about using a grid that would work with coordinates (X and Y position), but I couldn't find a working example for React Native. This would also be a viable option.

Any clues in the right direction would be much appreciated.

CodePudding user response：

I have finally found a package that does this. The name is autoresponsive-react-native. Docs, Github