native-layout-stack

About

SwiftUI like layout management for React Native

Idea

This library recreates SwiftUI components in React Native:

Stack

• HStack
• VStack

Spacer

• Spacer

Alternatives

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

$ npm install native-layout-stack

Or Yarn:

$ yarn add native-layout-stack

Getting Started

• Connect libary with project using ES6 import:

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 props without debug

Spacer

Component uses ViewProps

Types

| name | type | | -------- | ---------------- | | Space | number or string |

Example

import { LayoutProvider, Stack, Spacer } from 'native-layout-stack'

const MyComponent = () => {
  return (
    <Stack padding={[20, 10]} spaces={20}>
      <View />
      <View />
      <View />
    </Stack>
  )
}

const App = () => {
  return (
    <LayoutProvider spaces={10} padding={20}>
      <MyComponent />
    </LayoutProvider>
  )
}

export default App

License

This project is licensed under the MIT License © 2020-present Jakub Biesiada