native-layout-stack


About

SwiftUI like layout management for React Native

$3

This library recreates SwiftUI components in React Native:

Stack

- HStack
- VStack

Spacer

- Spacer

$3

- Stacks by Marcin Dziewulski
- react-native-divisible-view by kangsu
- React Native Spacing System by Hirokazu Nakano Tei

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

$3

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

$3

Stack extends ViewProps and implements all LayoutProvider props without debug

$3

Component uses ViewProps

$3

| 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