Why we use dynamic/responsive square grid functionality –
Here we start “How to set a dynamic/responsive square grid in react native” which is a component rendering grid of squares that perfectly fill your space (potentially with scrolling).
I’m a big fan of React Native, because it is very easy to implement complicated concepts and designs, in below example i am going to explain you in detail how to create a very simple dynamic/responsive square grid.
So today we going to talk about square-grid, for square-grid npm provide a great plugin named square-grid for implementing square-grid.
Output Example –
Step1:
Firslty we need to install the npm plugin for square-grid.
npm install --save react-native-square-grid
Step2:
Now you need to link the plugin as well as(only for that whoʼs version is below 0.61).
react-native link react-native-square-grid
Step4:
Now we are going to implement the react-native-square-grid, as well as 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>
)
}
So the topic “How to set a dynamic/responsive square grid in react native” is completed, you can find the next lesson here, you can find my profile on medium click here, please follow me on medium as well.
And if any other query/issue then please comment.
Happy Coding Guyz
Hi, I am a professional Ionic and React Native Pixel Perfect App Designer and Developer, with expertise in Client Communication, Bug Fixing, Third Party Lib, Version Control Tools, Requirement Understanding, and managing teams, I have 6+ years of experience in the same domain as well as in Codeigniter, JS, IoT, and more than 10 other languages. For the last 6+ years, not a single day went without design/development.
Please follow me on Medium: https://nehadwivedi1004.medium.com/