# react-native-stacks

> SwiftUI inspired Stacks and Spacer views

Latest version **1.0.1** (published 2021-10-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-stacks
pnpm add react-native-stacks
yarn add react-native-stacks
bun add react-native-stacks
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-10-12 |
| First published | 2021-03-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 215.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 44 |
| Author | Andrew Levy |
| Maintainers | alevy97 |
| Keywords | react, native, swiftui |

## Links

- npm: https://www.npmjs.com/package/react-native-stacks
- Repository: https://github.com/andrew-levy/react-native-stacks
- Homepage: https://github.com/andrew-levy/react-native-stacks#readme
- Issues: https://github.com/andrew-levy/react-native-stacks/issues
- npm.io page: https://npm.io/package/react-native-stacks

## 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

- 1.0.1 (latest) — 2021-10-12
- 1.0.0 — 2021-09-14
- 0.0.3 — 2021-09-14
- 0.0.2 — 2021-03-28
- 0.0.1 — 2021-03-26

## README

# react-native-stacks :pancakes:

SwiftUI inspired Stack and Spacer components

![stacks](/assets/readme-stacks.png?raw=true)
[Image from Design + Code ](https://designcode.io/swiftui-course)

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

## Installation

```console
yarn add react-native-stacks
```

## Usage

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

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

vs. SwiftUI...

```swift
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

- `leading`: left align
- `center`: center align
- `trailing`: right align

> required: no
>
> type: `'leading' | 'center' | 'trailing'`
>
> default: `'center'`

---

### `<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

- `leading`: top align
- `center`: center align
- `trailing`: bottom align

> required: no
>
> type: `'leading' | 'center' | 'trailing'`
>
> default: `'center'`

---

### `<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:

Veritcal

- `leading`: top align
- `center`: center align
- `trailing`: bottom align

Horizontal

- `leading`: left align
- `center`: center align
- `trailing`: right align

> required: no
>
> type: `{ vertical: Alignment, horizontal: Alignment }`
>
> default: `{ vertical: 'center', horizontal: 'center' }`

such that,

```typescript
type Alignment = 'leading' | 'center' | 'trailing';
```

---

### `<Spacer />`

A component to provide space between stack items. Adding a Spacer to the bottom of a stack will shift all of the previous stack items up, and opposite for the top. Adding a Spacer between views in a stack will push them apart.

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