React Native Responsive Grid

The best responsive grid component for react-native and react-native-web.

Installation

Using yarn:

yarn add react-native-responsive-grid-component

Using npm:

npm install react-native-responsive-grid-component --save

Example

Check the following example to see it in action and try changing the default props to see how it works.

Usage

First of all, you need to wrap your root component with the GridProvider.

import React from "react";
import { GridProvider } from "react-native-responsive-grid-component";

const App = () => {
  return (
    <GridProvider>
      {/* your content */}
    </GridProvider>
  );
};

Then you can use the Grid component in the rest of your app.

How to use it

First way

You can use directly the Grid component as in the following example.

import React from "react";
import { View, StyleSheet } from "react-native";
import { Grid } from "react-native-responsive-grid-component";

const App = () => {
  return (
    <Grid>
      {Array.from(Array(20).keys()).map((item, index) => {
        return (
          <View style={styles.card} />
        );
      })}
    </Grid>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: "white",
    borderRadius: 8,
    minHeight: 200,
    overflow: "hidden",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

Second way

You can use directly the Col and Row components as in the following example.

import React from "react";
import { View, StyleSheet } from "react-native";
import { Col, Row } from "react-native-responsive-grid-component";

const App = () => {
  return (
    <Row>
      {Array.from(Array(20).keys()).map((item, index) => {
        return (
          <Col>
            <View style={styles.card} />
          </Col>
        );
      })}
    </Row>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: "white",
    borderRadius: 8,
    minHeight: 200,
    overflow: "hidden",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

Properties

GridProvider

Prop	Description	Type	Default
sizes	The sizes of the Col component for each screen size.	SizesProps	{ xs: 12, sm: 6, md: 4, lg: 3, xl: 2 }
breakpoints	The breakpoints for each screen size.	SizesProps	{ xs: 500, sm: 730, md: 960, lg: 1450 }
padding	The padding between the elements in the grid.	number	16
showBreakpoints	Whether to show or not the breakpoints (for development purpouses).	boolean	false
breakpointsColor	The color of the breakpoints.	string	black

Grid

Accepts any View prop and the following.

Prop	Description	Type	Default
xs	Number of columns (between 0 and 12) that the each item should take in screens of size xs.	number	The one defined in the sizes prop of the GridProvider.
sm	Number of columns (between 0 and 12) that the each item should take in screens of size sm.	number	The one defined in the sizes prop of the GridProvider.
md	Number of columns (between 0 and 12) that the each item should take in screens of size md.	number	The one defined in the sizes prop of the GridProvider.
lg	Number of columns (between 0 and 12) that the each item should take in screens of size lg.	number	The one defined in the sizes prop of the GridProvider.
xl	Number of columns (between 0 and 12) that the each item should take in screens of size xl.	number	The one defined in the sizes prop of the GridProvider.
padding	The padding between the elements in the grid.	number	The one defined in the padding prop of the GridProvider.
rowStyle	Style for the Row component inside the grid.	StyleProp<ViewStyle>
colStyle	Style for the Col components inside the grid.	StyleProp<ViewStyle>

Col

Accepts any View prop and the following.

Prop	Description	Type	Default
xs	Number of columns (between 0 and 12) that the each item should take in screens of size xs.	number	The one defined in the sizes prop of the GridProvider.
sm	Number of columns (between 0 and 12) that the each item should take in screens of size sm.	number	The one defined in the sizes prop of the GridProvider.
md	Number of columns (between 0 and 12) that the each item should take in screens of size md.	number	The one defined in the sizes prop of the GridProvider.
lg	Number of columns (between 0 and 12) that the each item should take in screens of size lg.	number	The one defined in the sizes prop of the GridProvider.
xl	Number of columns (between 0 and 12) that the each item should take in screens of size xl.	number	The one defined in the sizes prop of the GridProvider.

Row

Accepts any View prop.

License

MIT