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-stack
Or 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 App
This project is licensed under the MIT License © 2020-present Jakub Biesiada