native-layout-stack

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