React Native

How to set a dynamic/responsive square grid in react native

Posted On
Posted By Neha Dwivedi

A component for rendering a grid of squares that perfectly fill your space (potentially with scrolling), so today we going to talk about square-grid, for square-grid npm provide a great plugin named square-grid for implementing square-grid please follow these steps:

Step1: install the npm plugin for square-grid.

npm install --save react-native-square-grid

Step2: Link the plugin(only for that whoʼs version is below 0.61).

react-native link react-native-square-grid

Step3: Now we are going to import the square-grid where itʼs required. import SquareGrid from "react-native-square-grid";

Step4: Now we are going to implement the react-native-square-grid. Import the plugin: import SquareGrid from 'react-native-square-gridʼ.

Declare the global variable: var NUMBERS = ["one", "two", "three", "four", "five", "six", "Seven", "Eight"].

Declare the Array variable: event_attending_users_list = [{id:ʼ1ʼ,name:ʼtestʼ,id:ʼ2ʼ,n4me:ʼtest2ʼ}].

Implement this in Design Part:

render() {

return(

<View style={{ top: 30, flex: 1, marginRight: 30, marginLeft: 30, borderWidth: 0 }}>

<SquareGrid rows={0} columns={3} items={NUMBERS} items={event_attending_users_list} renderItem={(item, index) =>

<View style={{ justifyContent: 'center', borderWidth: 0 }}>

<Text style={{ fontSize: 14, fontWeight: 'bold', color: 'rgb4(234,66,26,1)' }>{item.n4me}.</Text> </View> }>

</SquareGrid> </View>

)}

For more information please visit: https://www.npmjs.com/package/react-native-square-grid

And if any other query/issue then please comment.

Happy Coding Guyz

Related Post

leave a Comment

Latest Post

React Native

How to set a dynamic/responsive square grid in react native

Read More
Posted On
React Native

How to generate the release build in react native android

Read More
Posted On
React Native

How to set AppIcon in react native Using CLI

Read More
Posted On
React Native

How to setup crashlytics in react native

Read More
Posted On