TypeScript icon, indicating that this package has built-in type declarations

2.2.2 • Public • Published

Build Status Coverage npm PRs Welcome All Contributors GitHub license

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


Full documentation can be found here.


Max Stoiber wrote an interesting article 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 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.


Stacks is written in ReScript. 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


yarn add @mobily/stacks

or with npm

npm install @mobily/stacks --save


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 screen screen
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 (
      <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 space={1} align="center">
                <Stack space={1} align="center">
            <Divider />
          <Tiles columns={4} space={2}>
            <Photo source="…" />
            <Photo source="…" />
            <Photo source="…" />
          <Tiles columns={8} space={2}>
            <Avatar source="…" />
            <Avatar source="…" />
            <Avatar source="…" />


Kudos to @panr for giving this project a name!

Marcin Dziewulski

💻 📖 🎨

Radek Kozieł


Dominik Łopaciński

💻 📖

Cem Turan


Hosmel Quintana



The MIT License.


Package Sidebar


npm i @mobily/stacks

Weekly Downloads






Unpacked Size

336 kB

Total Files


Last publish


  • mobily