SwiftUI inspired Stacks and Spacer views
npm install react-native-stacksSwiftUI inspired Stack and Spacer components
!stacks
Image from Design + Code
- VStack: Vertical Stack
- HStack: Horizontal Stack
- ZStack: Overlay Stack
- Spacer: Spacing within Stacks
``console`
yarn add react-native-stacks
`jsx
import React from 'react';
import { Text, Button } from 'react-native';
import { VStack, HStack, Spacer } from 'react-native-stacks';
function Example() {
return (
);
}
`
vs. SwiftUI...
`swift`
struct Example: View {
var body: some View {
VStack(alignment: .leading, spacing: 20) {
Text("Orders")
Spacer()
HStack() {
Button(action: add) {
Text("Add")
}
Spacer()
Button(action: remove) {
Text("Remove")
}
}
}
}
}
A vertical stack
#### Props:
#### spacing
The amount of space between each item in the stack
> required: no
>
> type: number0
>
> default:
#### alignment
The horizontal alignment for the stack items
- leading: left aligncenter
- : center aligntrailing
- : right align
> required: no
>
> type: 'leading' | 'center' | 'trailing''center'
>
> default:
---
A horizontal stack
#### Props:
#### spacing
The amount of space between each item in the stack
> required: no
>
> type: number0
>
> default:
#### alignment
The vertical alignment for the stack items
- leading: top aligncenter
- : center aligntrailing
- : bottom align
> required: no
>
> type: 'leading' | 'center' | 'trailing''center'
>
> default:
---
An overlay stack
#### Props:
#### alignment
The horizontal and vertical alignment for the stack items. Since a ZStack overlays items on top of one another, we are able to align them both vertically and horizontally:
Veritcal
- leading: top aligncenter
- : center aligntrailing
- : bottom align
Horizontal
- leading: left aligncenter
- : center aligntrailing
- : right align
> required: no
>
> type: { vertical: Alignment, horizontal: Alignment }{ vertical: 'center', horizontal: 'center' }
>
> default:
such that,
`typescript``
type Alignment = 'leading' | 'center' | 'trailing';
---
A component to provide space between stack items. Adding a Spacer to the bottom of a stack will shift all of the previous stack items up, and opposite for the top. Adding a Spacer between views in a stack will push them apart.