A set of useful components to help you build and maintain React Native (Web too) layouts with ease.
## Documentation Full documentation can be found [here](https://mobily.github.io/stacks). ## Motivation [Max Stoiber](https://github.com/mxstbr) wrote an interesting [article](https://mxstbr.com/thoughts/margin) some time ago about why margin is considered harmful. There are three main disadvantages of using margin: - margin breaks component encapsulation - margin makes reusability harder - margin conflicts with how designers think It's obvious that handling margins across the entire project is simply difficult and may not be scalable. For web projects, a design system called [Braid](https://seek-oss.github.io/braid-design-system/foundations/layout) has developer-friendly API for building layouts. However, a similar library was missing for React Native based projects. Therefore, **Stacks** has been created and it adopts Braid Layouts API with subtle differences. ## Compatibility `Stacks` is written in [ReScript](https://rescript-lang.org/). It's compiled using BuckleScript to plain JavaScript and has typings for TypeScript and Flow. This means that out of the box `Stacks` is usable in any project that use the following: - plain JavaScript - TypeScript - Flow - ReScript `Stacks` can be used in React Native and React Native Web projects. ## Getting started ### Installation ```shell yarn add @mobily/stacks ``` or with `npm` ```shell npm install @mobily/stacks --save ``` ### Example The following example shows how simple it is building screens using `Stacks`. For debugging purposes, you may want to turn the debug mode on (pass the `debug` property to the provider) or use the customizable `Grid` component. | | Debug mode | Grid component | | ----------------------------- | ----------------------------------- | ---------------------------------- | |  |  |  | ```tsx import * as React from 'react' import { ScrollView, Text } from 'react-native' import { Stack, Box, Columns, Column, Tiles } from '@mobily/stacks' // import components, styles, etc. const Profile = () => { return ( Marcin Dziewulski 💻 📖 🎨 |
 Radek Kozieł 🤔 |
 Dominik Łopaciński 💻 📖 |
 Cem Turan 📖 |
 Hosmel Quintana 📖 |