@mobily/stacks
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    Stacks · Build Status Coverage npm PRs Welcome All Contributors GitHub license

    Build React Native layouts quickly with ease and fun.

    Motivation

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

    Compatibility

    Stacks is written in ReScript. It is compiled 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 is supported in React Native and React Native Web projects.

    Getting started

    Installation

    yarn add @mobily/stacks

    or with npm

    npm install @mobily/stacks --save

    ReScript

    Stacks depends on the following libraries, which you also have to install:

    • rescript-react-native
    • @rescript-react
    • wonka
    yarn add @rescript/react rescript-react-native wonka

    or with npm

    npm install @rescript/react rescript-react-native wonka --save

    Once all dependencies are installed, add them to bs-dependencies in your bsconfig.json:

    {
      "bs-dependencies": [
        "@mobily/stacks",
        "@rescript/react",
        "rescript-react-native",
        "wonka"
      ]
    }

    Example

    The following example shows how simple it is building screens without using neither margin nor padding properties in your style sheets objects. 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 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>
      )
    }

    Api Reference

    Full documentation is available here.

    Support

    If you enjoy using Stacks in either personal or commercial (eg. for your company) project, please consider buying me a coffee by using the button below, thank you! ❤️

    Contributors

    Kudos to @panr for giving this project a name!

    Marcin Dziewulski
    Marcin Dziewulski

    💻 📖

    License

    The MIT License.

    See LICENSE

    Install

    npm i @mobily/stacks

    DownloadsWeekly Downloads

    487

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    433 kB

    Total Files

    75

    Last publish

    Collaborators

    • mobily