HStack
Use the HStack component to align items horizontally. For example, you can use this to stack Avatars or any other ReactNode item.
Props
xGap
Use this to set the horizontal gap between items or to overlap them.
| Type | Default | Description |
|---|---|---|
number | / | It accepts any number, positive or negative. If negative, the items will overlap. |
Example
topDown
If active, items will be stacked from top to bottom. It's noticeable only if xGap 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 UIHStack = ({
xGap,
children,
}) => {
const styles = {
hStack: {
overflow: 'hidden',
flexDirection: 'row',
minWidth: 0,
minHeight: 0,
flexShrink: 0,
},
hStackItemWrap: {
marginLeft: xGap,
minWidth: 0,
flexShrink: 0,
},
hStackItemWrapIsFirst: {
marginLeft: 0,
},
};
return (
<View style={styles.hStack}>
{React.Children.map(children, (child, index) => {
const isFirst = index === 0;
return (
<View key={child?.key} style={[styles.hStackItemWrap, isFirst && styles.hStackItemWrapIsFirst]}>
{React.cloneElement(child)}
</View>
)
})}
</View>
);
};
export default UIHStack;
Usage example
<UIHStack
xGap={-12}
>
<View style={{width: 64, height: 64, borderRadius: 16, backgroundColor: '#1bbeb0', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>1</Text></View>
<View style={{width: 64, height: 64, borderRadius: 16, backgroundColor: '#169f94', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>2</Text></View>
<View style={{width: 64, height: 64, borderRadius: 16, backgroundColor: '#11756d', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>3</Text></View>
</UIHStack>