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
• react-native-stacks by Andrew Levy

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 library 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 React from 'react'
import { View } from 'react-native'
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