Grid

Use the Grid component to list and layout your items in a single or multi-column grid.

Props

`columns`

Use this to set the number of columns.

Type	Default	Description
`number`	`2`	Any positive number.

Example

Source code

<View>
  <UIGrid
    columns={1}
    yGap={8}
  >
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
  <UIGrid
    xGap={8}
    yGap={8}
  >
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
  <UIGrid
    columns={3}
    xGap={8}
    yGap={8}
  >
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
  <UIGrid
    columns={4}
    xGap={8}
    yGap={8}
  >
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
</View>

`xGap`

Use this to set horizontal gap between columns.

Type	Default	Description
`number`	`0`	Does not accept negative numbers.

Example

Source code

<View>
  <UIGrid 
    columns={3}
    xGap={4}
  >
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
  <UIGrid 
    columns={3}
    xGap={16}
  >
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
  <UIGrid 
    columns={3}
    xGap={32}
  >
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 50, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
</View>

`yGap`

Use this to set vertical gap between rows.

Type	Default	Description
`number`	`0`	Does not accept negative numbers.

Example

Source code

<View>
  <UIGrid
    columns={1}
    yGap={4}
  >
    <View style={{borderRadius: 8, height: 100, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 100, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
  <UIGrid
    columns={1}
    yGap={16}
  >
    <View style={{borderRadius: 8, height: 100, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 100, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
  <UIGrid
    columns={1}
    yGap={32}
  >
    <View style={{borderRadius: 8, height: 100, backgroundColor: '#1bbeb0'}}/>
    <View style={{borderRadius: 8, height: 100, backgroundColor: '#1bbeb0'}}/>
  </UIGrid>
</View>

`children`

Use this to set ReactNode items.

Type	Default	Description
`ReactNode`	`/`	Items will get the width of the columns but you need to define the height on item level.

Example

Source code

<UIGrid>
  {/* Your ReactNode item */}
  {/* Your ReactNode item */}
  {/* Your ReactNode item */}
</UIGrid>

Preview

numOfItems

Use this to set the number of items to display.

Tips

Overflow hidden

It is there just in case to avoid unwanted behaviour in some cases (like horizontal/vertical scrolling in some situations). If you have problems having some elements cut off on the edges, you can remove that property if you are sure it won't cause any other unwanted behaviour.

Editor

columns

xGap

yGap

Source code

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

const UIGrid = ({
  columns = 2,
  xGap = 0,
  yGap = 0,
  children,
}) => {
  const styles = {
    grid: {
      overflow: 'hidden',
      flexShrink: 0,
    },
    gridContent: {
      flexShrink: 0,
      flexDirection: 'row',
      flexWrap: 'wrap',
      marginHorizontal: -xGap / 2,
      marginVertical: -yGap / 2,
    },
    gridItem: {
      paddingHorizontal: xGap / 2,
      paddingVertical: yGap / 2,
      minWidth: 0,
      minHeight: 0,
      flexShrink: 0,
      width: `${100 / columns}%`,
    },
  };

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

export default UIGrid;

Usage example

<UIGrid
  xGap={12}
  yGap={12}
>
  <View style={{borderRadius: 16, height: 100, backgroundColor: '#1bbeb0'}}/>
  <View style={{borderRadius: 16, height: 100, backgroundColor: '#1bbeb0'}}/>
  <View style={{borderRadius: 16, height: 100, backgroundColor: '#1bbeb0'}}/>
  <View style={{borderRadius: 16, height: 100, backgroundColor: '#1bbeb0'}}/>
  <View style={{borderRadius: 16, height: 100, backgroundColor: '#1bbeb0'}}/>
  <View style={{borderRadius: 16, height: 100, backgroundColor: '#1bbeb0'}}/>
</UIGrid>