native-layout-stack
About
SwiftUI like layout management for React Native
Idea
This library recreates SwiftUI components in React Native:
Stack
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