react-native-stacks 🥞

SwiftUI inspired Stack and Spacer components.

Image from Design + Code

• VStack: Vertical Stack
• HStack: Horizontal Stack
• ZStack: Overlay Stack
• Spacer: Spacing within Stacks

Installation

yarn add react-native-stacks

Usage

import React from "react";
import { Text, Button } from "react-native";
import { VStack, HStack, Spacer } from "react-native-stacks";

function Example() {
  return (
    <VStack aligmment="leading" spacing={20}>
      <Text>Orders</Text>
      <Spacer />
      <HStack>
        <Button onPress={add} title="Add" />
        <Spacer />
        <Button onPress={remove} title="Remove" />
      </HStack>
    </VStack>
  );
}

vs. SwiftUI...

struct Example: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 20) {
      Text("Orders")
      Spacer()
      HStack() {
        Button(action: add) {
          Text("Add")
        }
        Spacer()
        Button(action: remove) {
          Text("Remove")
        }
      }
    }
  }
}

Documentation

<VStack />

A vertical stack.

Props:

spacing

The amount of space between each item in the stack.

required: no

type: number

default: 0

alignment

The horizontal alignment for the stack items.

required: no

type: VStackAlignment

default: 'center'

type VStackAlignment = "leading" | "center" | "trailing";

---

<HStack />

A horizontal stack.

Props:

spacing

The amount of space between each item in the stack.

required: no

type: number

default: 0

alignment

The vertical alignment for the stack items.

required: no

type: HStackAlignment

default: 'center'

type HStackAlignment = "top" | "center" | "bottom";

---

<ZStack />

An overlay stack.

Props:

alignment

The horizontal and vertical alignment for the stack items. Since a ZStack overlays items on top of one another, we are able to align them both vertically and horizontally.

required: no

type: ZStackAlignment

default: 'center'

type ZStackAlignment =
  | "top"
  | "center"
  | "bottom"
  | "leading"
  | "trailing"
  | "topLeading"
  | "topTrailing"
  | "bottomLeading"
  | "bottomTrailing";

---

<Spacer />

A component to provide space between stack items. Spacers will fill the available space between components.