# @mobily/stacks

> ⚡ A set of useful components to help you build and maintain React Native (Web too) layouts with ease.

Latest version **2.2.2** (published 2022-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mobily/stacks
pnpm add @mobily/stacks
yarn add @mobily/stacks
bun add @mobily/stacks
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2022-09-29 |
| First published | 2020-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 10.* |
| Dependencies | 1 |
| Unpacked size | 328.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1028 |
| Author | Marcin Dziewulski |
| Maintainers | mobily |
| Keywords | react-native, react, typescript, rescript, flow, stacks, layout, ui |

## Links

- npm: https://www.npmjs.com/package/@mobily/stacks
- Repository: https://github.com/mobily/stacks
- Homepage: https://mobily.github.io/stacks
- Issues: https://github.com/mobily/stacks/issues
- npm.io page: https://npm.io/package/@mobily/stacks

## Dependencies (1)

- [wonka](https://npm.io/package/wonka.md) ~6.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.2 (latest) — 2022-09-29
- 1.1.8-rc.1 (next) — 2021-05-22
- 2.2.1 — 2022-09-10
- 2.2.0 — 2022-08-14
- 2.1.0 — 2022-06-05
- 2.0.0 — 2022-02-28
- 1.4.1 — 2021-11-08
- 1.4.0 — 2021-11-08
- 1.3.1 — 2021-09-19
- 1.3.0 — 2021-09-18
- 1.2.1 — 2021-06-10
- 1.2.0 — 2021-05-23
- 1.1.8 — 2021-05-22
- 1.1.8-rc.0 — 2021-05-22
- 1.1.7 — 2021-05-12
- … 29 more at https://npm.io/package/@mobily/stacks/versions

## README

<p align="center">
  <img src="https://raw.githubusercontent.com/mobily/stacks/master/assets/stacks-frame.png" width="480">
</p>

<p align="center">
  <a href="https://travis-ci.com/mobily/stacks">
    <img src="https://img.shields.io/travis/com/mobily/stacks.svg?style=flat-square&logo=travis" alt="Build Status">
  </a>
  <a href="https://coveralls.io/github/mobily/stacks?branch=master">
    <img src="https://img.shields.io/coveralls/github/mobily/stacks.svg?style=flat-square&amp;logo=coveralls" alt="Coverage">
  </a>
  <a href="https://www.npmjs.com/package/@mobily/stacks">
    <img src="https://img.shields.io/npm/v/@mobily/stacks.svg?style=flat-square&amp;logo=npm" alt="npm">
  </a>
  <a href="http://makeapullrequest.com">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome">
  </a>
  <a href="#contributors">
    <img src="https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square" alt="All Contributors">
  </a>
  <a href="https://github.com/mobily/stacks/blob/master/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="GitHub license">
  </a>
</p>

<p align="center">
  <strong>A set of useful components to help you build and maintain React Native (Web too) layouts with ease.</strong>
</p>


## 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                     |
| ----------------------------- | ----------------------------------- | ---------------------------------- |
| ![screen](assets/example.png) | ![screen](assets/example-debug.png) | ![screen](assets/example-grid.png) |

```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 (
    <ScrollView>
      <Box padding={4}>
        <Stack space={4}>
          <Stack space={4} align="center">
            <Avatar source="…" size={96} />
            <Stack space={1} align="center">
              <Title>Jenna Doe</Title>
              <Description>Photographer &amp; Artist</Description>
            </Stack>
            <Columns>
              <Column>
                <Stack space={1} align="center">
                  <Text>Followers</Text>
                  <Counter>258</Counter>
                </Stack>
              </Column>
              <Column>
                <Stack space={1} align="center">
                  <Text>Following</Text>
                  <Counter>346</Counter>
                </Stack>
              </Column>
            </Columns>
            <Divider />
          </Stack>
          <Text>Photos</Text>
          <Tiles columns={4} space={2}>
            <Photo source="…" />
            <Photo source="…" />
            <Photo source="…" />
          </Tiles>
          <Text>Followers</Text>
          <Tiles columns={8} space={2}>
            <Avatar source="…" />
            <Avatar source="…" />
            <Avatar source="…" />
          </Tiles>
        </Stack>
      </Box>
    </ScrollView>
  )
}
```

## Contributors

Kudos to [@panr](https://github.com/panr) for giving this project a name!

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://twitter.com/__marcin_"><img src="https://avatars1.githubusercontent.com/u/1467712?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marcin Dziewulski</b></sub></a><br /><a href="https://github.com/mobily/stacks/commits?author=mobily" title="Code">💻</a> <a href="https://github.com/mobily/stacks/commits?author=mobily" title="Documentation">📖</a> <a href="#design-mobily" title="Design">🎨</a></td>
    <td align="center"><a href="https://github.com/panr"><img src="https://avatars.githubusercontent.com/u/1303365?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Radek Kozieł</b></sub></a><br /><a href="#ideas-panr" title="Ideas, Planning, & Feedback">🤔</a></td>
    <td align="center"><a href="https://github.com/domeknn"><img src="https://avatars.githubusercontent.com/u/9402280?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dominik Łopaciński</b></sub></a><br /><a href="https://github.com/mobily/stacks/commits?author=domeknn" title="Code">💻</a> <a href="https://github.com/mobily/stacks/commits?author=domeknn" title="Documentation">📖</a></td>
    <td align="center"><a href="https://ce.ms/"><img src="https://avatars.githubusercontent.com/u/959142?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Cem Turan</b></sub></a><br /><a href="https://github.com/mobily/stacks/commits?author=cem2ran" title="Documentation">📖</a></td>
    <td align="center"><a href="http://hosmelq.com/"><img src="https://avatars.githubusercontent.com/u/1166143?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hosmel Quintana</b></sub></a><br /><a href="https://github.com/mobily/stacks/commits?author=hosmelq" title="Documentation">📖</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

## License

The MIT License.

See [LICENSE](LICENSE)

---
_Source: https://npm.io/package/@mobily/stacks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._