WrapStack

Use the WrapStack component to align items horizontally and let them wrap to new line. It can be used for tags, labels, etc.

Props

xGap

Use this to set horizontal gap between items.

TypeDefaultDescription
number0Any positive number.

Example

Source code
<View>
  <UIWrapStack xGap={16}>
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 40, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
  </UIWrapStack>
  <UIWrapStack xGap={32}>
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 40, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
  </UIWrapStack>
</View>

yGap

Use this to set vertical gap between rows when items wrap to new line.

TypeDefaultDescription
number0Any positive number.

Example

Source code
<View>
  <UIWrapStack 
    xGap={1} 
    yGap={16}
  >
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 40, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 50, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 50, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
  </UIWrapStack>
  <UIWrapStack 
    xGap={1}
    yGap={32}
  >
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 40, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 50, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 50, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
  </UIWrapStack>
</View>

justify

Use this to align items horizontally.

TypeDefaultDescription
'start' 
| 'center' 
| 'end'
'start'Align items horizontally. Suitable for tags, labels, etc.
It's not enabled by default. Make sure to enable it in Editor if you want to use it.

Example

Source code
<View>
  <UIWrapStack 
    xGap={16}
  >
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 40, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
  </UIWrapStack>
  <UIWrapStack 
    xGap={16} 
    justify="center"
  >
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 40, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
  </UIWrapStack>
  <UIWrapStack 
    xGap={16} 
    justify="end"
  >
    <View style={{width: 60, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 40, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
    <View style={{width: 70, height: 28, borderRadius: 4, backgroundColor: '#1bbeb0'}} />
  </UIWrapStack>
</View>

children

Use this to set ReactNode items.

TypeDefaultDescription
ReactNode/You need to set width and height on item level.

Example

Source code
<UIVStack>
  {/* Your ReactNode item */}
  {/* Your ReactNode item */}
  {/* Your ReactNode item */}
</UIVStack>

Preview

numOfItems

Use this to set the number of items to display.

Editor

Source code
import React from 'react';
import {View} from 'react-native';

const UIWrapStack = ({
  xGap = 0,
  yGap = 0,
  children,
}) => {
  const styles = {
    wrapStack: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'center',
      columnGap: xGap,
      rowGap: yGap,
    },
    wrapStackItemWrap: {
      minWidth: 0,
    },
  };

  return (
    <View style={styles.wrapStack}>
      {React.Children.map(children, (child) => (
        <View style={styles.wrapStackItemWrap}>{React.cloneElement(child)}</View>
      ))}
    </View>
  );
};

export default UIWrapStack;
Usage example
<UIWrapStack
  xGap={4}
  yGap={4}
>
  <View style={{borderRadius: 4, height: 28, backgroundColor: '#1bbeb0', width: 102}} />
  <View style={{borderRadius: 4, height: 28, backgroundColor: '#1bbeb0', width: 84}} />
  <View style={{borderRadius: 4, height: 28, backgroundColor: '#1bbeb0', width: 111}} />
  <View style={{borderRadius: 4, height: 28, backgroundColor: '#1bbeb0', width: 80}} />
  <View style={{borderRadius: 4, height: 28, backgroundColor: '#1bbeb0', width: 115}} />
  <View style={{borderRadius: 4, height: 28, backgroundColor: '#1bbeb0', width: 107}} />
  <View style={{borderRadius: 4, height: 28, backgroundColor: '#1bbeb0', width: 96}} />
  <View style={{borderRadius: 4, height: 28, backgroundColor: '#1bbeb0', width: 84}} />
</UIWrapStack>