# native-x-stack

> Stack component for react native

Latest version **1.1.0** (published 2022-10-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install native-x-stack
pnpm add native-x-stack
yarn add native-x-stack
bun add native-x-stack
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-10-03 |
| First published | 2021-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Rinto Jose |
| Maintainers | rintoj |

## Links

- npm: https://www.npmjs.com/package/native-x-stack
- Repository: https://github.com/rintoj/native-x-stack
- Homepage: https://github.com/rintoj/native-x-stack#readme
- Issues: https://github.com/rintoj/native-x-stack/issues
- npm.io page: https://npm.io/package/native-x-stack

## Dependencies (2)

- [native-x-theme](https://npm.io/package/native-x-theme.md) ^1.1.0
- [tachyons-react-native](https://npm.io/package/tachyons-react-native.md) ^1.0.4

## Recent versions

- 1.1.0 (latest) — 2022-10-03
- 1.0.12 — 2021-08-10
- 1.0.11 — 2021-06-08
- 1.0.10 — 2021-06-08
- 1.0.9 — 2021-06-03
- 1.0.8 — 2021-03-09
- 1.0.7 — 2021-02-15
- 1.0.6 — 2021-02-12
- 1.0.5 — 2021-02-05
- 1.0.4 — 2021-02-05
- 1.0.3 — 2021-02-04
- 1.0.2 — 2021-02-04
- 1.0.1 — 2021-02-04
- 1.0.0 — 2021-02-02

## README

# native-x-stack

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

This modules helps you define stacked views in React Native application

## Install

### Yarn

```sh
yarn add native-x-stack
```

### NPM

```sh
npm install native-x-stack
```

## Usage

```tsx
import { Stack } from 'native-x-stack'

function MyComponent() {
  return <Stack fill>
    {...}
  </Stack>
}
```

## API

| Property                                      | Default Value | Usage                                                                  |
| --------------------------------------------- | ------------- | ---------------------------------------------------------------------- |
| hAlign?: HAlign                               |               | Horizontal alignment: HAlign.{LEFT, CENTER, RIGHT}                     |
| vAlign?: VAlign                               |               | Vertical alignment: HAlign.{TOP, MIDDLE, BOTTOM}                       |
| justifyAround?: boolean                       | false         | Justify around items in the stack                                      |
| justifyBetween?: boolean                      | false         | Move items towards the corner of the stack                             |
| reverse?: boolean                             | false         | Reverse the direction of flex                                          |
| horizontal?: boolean                          | false         | Stack items horizontally if true                                       |
| fill?: boolean                                | number        | Fill parent or set style to { flex: ${fill} }                          |
| wrap?: boolean                                | false         | Wrap content once reached the end of the current row                   |
| zIndex?: number                               |               | Z-Index ordering                                                       |
| width?: number                                |               | Width of the stack                                                     |
| height?: number                               |               | Height of the stack                                                    |
| minWidth?: number                             |               | Min width of the stack                                                 |
| minHeight?: number                            |               | Min height of the stack                                                |
| maxWidth?: number                             |               | Max width of the stack                                                 |
| maxHeight?: number                            |               | Max height of the stack                                                |
| spacing?: number                              |               | Spacing between items                                                  |
| overflow?: Overflow                           |               | Make content visible beyond content borders, Overflow.{VISIBLE,HIDDEN} |
| onLayout?: (event: LayoutChangeEvent) => void | false         | Callback handler for layout changes                                    |
| style: ViewStyle                              |               | Additional style                                                       |

## Automatic Release

Here is an example of the release type that will be done based on a commit messages:

| Commit message      | Release type          |
| ------------------- | --------------------- |
| fix: [comment]      | Patch Release         |
| feat: [comment]     | Minor Feature Release |
| perf: [comment]     | Major Feature Release |
| doc: [comment]      | No Release            |
| refactor: [comment] | No Release            |
| chore: [comment]    | No Release            |

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