VStack
Use the VStack component to align items vertically.
Props
yGap
Use this to set vertical gap between items
| Type | Default | Description |
|---|---|---|
number | / | It accepts any number, positive or negative. If negative, the items will overlap. |
Example
topDown
If true, items will be stacked from top to bottom. It's noticable only if yGap is negative number.
| Type | Default | Description |
|---|---|---|
boolean | / | If active, first item will be at the top and each next item will be below the previous one. It's not enabled by default. Make sure to enable it in Editor if you want to use it. |
Example
reverse
Use this to reverse the order of items.
| Type | Default | Description |
|---|---|---|
boolean | / | It does not affect the topDown prop, it only reverses the order of items. It's not enabled by default. Make sure to enable it in Editor if you want to use it. |
Example
children
Use this to set ReactNode items.
| Type | Default | Description |
|---|---|---|
ReactNode | / | You need to set width and height on item level. |
Example
Editor
Source code
import React from 'react';
import {View} from 'react-native';
const UIVStack = ({
yGap,
children,
}) => {
const styles = {
vStack: {
overflow: 'hidden',
flexDirection: 'column',
minWidth: 0,
minHeight: 0,
flexShrink: 0,
},
vStackItemWrap: {
marginTop: yGap,
minWidth: 0,
flexShrink: 0,
},
vStackItemWrapIsFirst: {
marginTop: 0,
},
};
return (
<View style={styles.vStack}>
{React.Children.map(children, (child, index) => {
const isFirst = index === 0;
return (
<View key={child?.key} style={[styles.vStackItemWrap, isFirst && styles.vStackItemWrapIsFirst]}>
{React.cloneElement(child)}
</View>
)
})}
</View>
);
};
export default UIVStack;
Usage example
<UIVStack>
<View style={{height: 64, borderRadius: 16, backgroundColor: '#1bbeb0', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>1</Text></View>
<View style={{height: 64, borderRadius: 16, backgroundColor: '#169f94', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>2</Text></View>
<View style={{height: 64, borderRadius: 16, backgroundColor: '#11756d', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>3</Text></View>
</UIVStack>