react-native-responsive-grid

It's best to make it so easy for a designer to make responsive (and even adaptive) layouts (for both native mobile and web) that this AI-based contraption that is guaranteed to produce wrong outcomes some of the time becomes unnecessary, at least for any practical purpose (unless the goal is the automated copying of web pages which is a lot bigger problem than guessing the markup, given how much complex dynamic behavior is built into pages these days) I've taken an attempt at simplifying the task of building responsive and adaptive React Native apps with the following little library. https://github.com/idibidiart/react-native-responsive-grid

A Unified Theory of Layout? This grid eschews Flexbox-based sizing in favor of percentage-based sizing while at the same time relying on Flexbox for alignment. It delivers the predictability of the percentage-based model with the more sophisticated alignment capasbility of the Flexbox model. The grid construct is extended beyond its archetypal form as a Rectilinear 2D Grid and generalized as a cross-nestable pair of components, namely, Row and Column, that can be combined in an alternating pattern to build a tree of Views of any shape and depth. That is to say, a Row View (Row for short) may contain one or more Column Views (Column for short), each of which may contain one or more Rows, which in turn may contain one or more Columns, and so on. Both Rows and Columns can be styled using predictable, percentage-based width, height, padding a

FYI - I just released this: Dynamic, Responsive Layout for Universal and Orientation-Aware React Native Apps (works in Expo, XCode et al): Flexbox-based layout library that makes building Universal layouts in React Native more fun and much easier than using Flexbox and JS directly. Repo: https://github.com/idibidiart/react-native-responsive-grid aspectRatio demo: https://m.youtube.com/watch?v=Nghqc5QFln8 breakPoints demo: https://www.youtube.com/watch?v=GZ1uxWEVAuQ