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