A component for rendering a grid of squares that perfectly fill your space (potentially with scrolling)
MIT License
A component for rendering a grid of squares that perfectly fill your space (potentially with scrolling)
npm install --save react-native-square-grid
import SquareGrid from "react-native-square-grid";
<SquareGrid columns={number} rows={number} items={array<any>} renderItem={fn(item, index)} />
columns
is the number of columns your grid should haverows
is the number of rows your grid should have. If you set rows to false
or 0
, it will render as many items as it can and scrollitems
is an array of the contents you want for the grid. If the number of items is greater than the rows and columns allow, they will be ignored. (Unless scrolling is enabled)renderItem
is a function taking an item and an index, and returning a React node to fill the grid item withimport React, {Component} from "react";
import {
View,
StyleSheet,
Text,
} from "react-native";
import SquareGrid from "react-native-square-grid";
var NUMBERS = [
"one",
"two",
"three",
"four",
"five",
"six"
];
var styles = StyleSheet.create({
item: {
flex: 1,
alignSelf: "stretch",
padding: 16
},
content: {
flex: 1,
backgroundColor: "red",
alignItems: "center",
justifyContent: "center"
},
text: {
color: "white",
fontSize: 32
}
});
// Best viewed in landscape
export default function SquareGridExample(props){
return (
<SquareGrid rows={2} columns={3} items={NUMBERS} renderItem={renderItem} />
);
}
function renderItem(item) {
return (
<View style={styles.item}>
<View style={styles.content}>
<Text style={styles.text}>{item}</Text>
</View>
</View>
);
}
There is an example project you can run which support orientation changes. You can view the browser version here
example/SquareGridExample
npm install
npm run setup
to copy the library code into the projectnpm start
react-native run-android
react-native
run-iosnpm run start-web