SwiftUI like layout management for React Native
This library recreates SwiftUI components in React Native:
Stack
Spacer
- Stacks by Marcin Dziewulski
- react-native-divisible-view by kangsu
- React Native Spacing System by Hirokazu Nakano Tei
- react-native-stacks by Andrew Levy
First, install the library in your project by npm:
$ npm install native-layout-stackOr Yarn:
$ yarn add native-layout-stack• Connect library with project using ES6 import:
import { LayoutProvider, Stack, Spacer } from 'native-layout-stack'| 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 extends ViewProps and implements all LayoutProvider props without debug
Component uses ViewProps
| name | type |
|---|---|
| Space | number or string |
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 AppThis project is licensed under the MIT License © 2020-present Jakub Biesiada