Native-layout-stack NPM

native-layout-stack

About

SwiftUI like layout management for React Native

Idea

This library recreates SwiftUI components in React Native:

Stack

Spacer

Spacer

Alternatives

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