# native-layout-stack > SwiftUI like layout management Latest version **1.0.0-beta.5** (published 2021-06-05) · MIT license · 0 weekly downloads ## Install ```sh npm install native-layout-stack pnpm add native-layout-stack yarn add native-layout-stack bun add native-layout-stack ``` ## 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.0-beta.5 | | Published | 2021-06-05 | | First published | 2020-08-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 19 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 10 | | Author | Jakub Biesiada | | Maintainers | jbiesiada | | Keywords | library, react-native, grid, stack, layout, vertical, horizontal, spacer | ## Links - npm: https://www.npmjs.com/package/native-layout-stack - Repository: https://github.com/native-ly/native-layout-stack - Homepage: https://github.com/native-ly/native-layout-stack#readme - Issues: https://github.com/native-ly/native-layout-stack/issues - npm.io page: https://npm.io/package/native-layout-stack ## Dependencies (2) - [randomcolor](https://npm.io/package/randomcolor.md) ^0.6.2 - [react-safe-context-hooks](https://npm.io/package/react-safe-context-hooks.md) ^1.0.0 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.0.0-beta.5 (latest) — 2021-06-05 - 1.0.0-beta.4 (beta) — 2021-02-21 - 0.0.0-alpha.8 (alpha) — 2021-01-07 - 1.0.0-beta.3 — 2021-02-20 - 1.0.0-beta.2 — 2021-02-20 - 1.0.0-beta.1 — 2021-01-08 - 1.0.0-beta.0 — 2021-01-08 - 0.0.0-alpha.7 — 2021-01-07 - 0.0.0-alpha.6 — 2021-01-07 - 0.0.0-alpha.5 — 2021-01-07 - 0.0.0-alpha.4 — 2021-01-07 - 0.0.0-alpha.3 — 2021-01-07 - 0.0.0-alpha.2.4 — 2020-10-11 - 0.0.0-alpha.2.3 — 2020-10-11 - 0.0.0-alpha.2.2 — 2020-10-11 - … 4 more at https://npm.io/package/native-layout-stack/versions ## README # [native-layout-stack](https://github.com/native-ly/native-layout-stack) [![NPM version](https://img.shields.io/npm/v/native-layout-stack?style=flat-square)](https://www.npmjs.com/package/native-layout-stack) [![NPM downloads](https://img.shields.io/npm/dm/native-layout-stack?style=flat-square)](https://www.npmjs.com/package/native-layout-stack) [![NPM license](https://img.shields.io/npm/l/native-layout-stack?style=flat-square)](https://www.npmjs.com/package/native-layout-stack) [![run in expo snack](https://img.shields.io/badge/Run%20in%20Snack-4630EB?style=flat-square&logo=EXPO&labelColor=FFF&logoColor=000)](https://snack.expo.io/@jbiesiada/native-layout-stack) [![Codecov](https://img.shields.io/codecov/c/github/native-ly/native-layout-stack?style=flat-square)](https://codecov.io/gh/native-ly/native-layout-stack) [![Travis](https://img.shields.io/travis/com/native-ly/native-layout-stack/main?style=flat-square)](https://travis-ci.com/native-ly/native-layout-stack) ## About [SwiftUI](https://developer.apple.com/xcode/swiftui/) like layout management for React Native ### Idea This library recreates SwiftUI components in React Native: **Stack** - [HStack](https://developer.apple.com/documentation/swiftui/hstack/) - [VStack](https://developer.apple.com/documentation/swiftui/vstack/) **Spacer** - [Spacer](https://developer.apple.com/documentation/swiftui/spacer/) ### Alternatives - [Stacks](https://github.com/mobily/stacks/) by [Marcin Dziewulski](https://github.com/mobily/) - [react-native-divisible-view](https://github.com/kangsu-dev/react-native-divisible-view/) by [kangsu](https://github.com/kangsu-dev/) - [React Native Spacing System](https://github.com/hirokazutei/react-native-spacing-system/) by [Hirokazu Nakano Tei](https://github.com/hirokazutei/) ## How to Install First, install the library in your project by npm: ```sh $ npm install native-layout-stack ``` Or Yarn: ```sh $ yarn add native-layout-stack ``` ## Getting Started **• Connect libary with project using ES6 import:** ```js import { LayoutProvider, Stack, Spacer } from 'native-layout-stack' ``` ## Options ### LayoutProvider | **name** | **type** | **description** | | ------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------- | | padding | Space or [Space] or [Space, Space] or [Space, Space, Space] or [Space, Space, Space, Space] | Outer space | | spaces | Space | Space between children | | omitNull | boolean | Skip elements that are `null` or `React.Fragment` | | arrayDivision | boolean | | | debug | boolean | Add random color to spaces | ### Stack Stack extends ViewProps and implements all [`LayoutProvider`](#layoutprovider) props without `debug` ### Spacer Component uses ViewProps ### Types | **name** | **type** | | -------- | ---------------- | | Space | number or string | ## Example ```jsx import { LayoutProvider, Stack, Spacer } from 'native-layout-stack' const MyComponent = () => { return ( ) } const App = () => { return ( ) } export default App ``` ## License This project is licensed under the MIT License © 2020-present Jakub Biesiada --- _Source: https://npm.io/package/native-layout-stack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._