native-layout-stack
TypeScript icon, indicating that this package has built-in type declarations

1.0.0-beta.5 • Public • Published

native-layout-stack

NPM version NPM downloads NPM license run in expo snack Codecov Travis

About

SwiftUI like layout management for React Native

Idea

This library recreates SwiftUI components in React Native:

Stack

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

License

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

Package Sidebar

Install

npm i native-layout-stack

Weekly Downloads

1

Version

1.0.0-beta.5

License

MIT

Unpacked Size

19.5 kB

Total Files

26

Last publish

Collaborators

  • jbiesiada