React Native - GridView Layout - Mobile Application development
Congratulations! You are standing in the right place! In this article, we are engendering a customized GridView for both android and iOS applications.
We are going to create a mobile app like below,
Implementation:
You must set up your local development environment. Follow the below link to set up your local environment.
After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.
Next, we are going to edit the App.js file and write the below code.
Import AppRegistry, StyleSheet, FlatList, Text, View, Alert and Platform component in your project.
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert, Platform }
from 'react-native';
Engender constructor in your project’s class and inside that constructor define super( ) method with props inside it. Now Utilizing the State define the GridView items utilizing key.
constructor(props) {
super(props);
this.state = {
GridView: [
{ key: 'Java' },
{ key: 'C' },
{ key: 'C++' },
{ key: 'PHP' },
{ key: 'Javascript' },
{ key: 'Python' },
{ key: 'Kotlin' },
{ key: 'Scala' },
{ key: 'NodeJS' },
{ key: 'Angular' },
{ key: 'VueJS' },
{ key: 'ReactJS' },
{ key: 'Android' },
{ key: 'iOS' },
{ key: 'Go' },
{ key: 'Ruby' },
{ key: 'EmberJS' },
{ key: 'C#' },
{ key: 'jQuery' },
{ key: 'Flutter' }
]
}
}
Engender GetGridView() function. This function would sanction us to get the GridView clicked item value.
GetGridView(item) {
Alert.alert(item);
}
View
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={this.state.GridView}
renderItem={({ item }) => <View style=
{styles.GridViewBlockStyle}>
<Text style={styles.GridViewInsideTextItemStyle}
onPress={this.GetGridView.bind(this, item.key)} > {item.key} </Text>
</View>}
numColumns={2}
/>
</View>
);
}
}
Style Sheet
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
flex: 1,
margin: 10,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0
},
GridViewBlockStyle: {
justifyContent: 'center',
flex: 1,
alignItems: 'center',
height: 100,
margin: 5,
backgroundColor: 'purple'
}
,
GridViewInsideTextItemStyle: {
color: '#fff',
padding: 10,
fontSize: 18,
justifyContent: 'center',
},
});
Complete source code for App.js File
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert,
Platform } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
GridView: [
{ key: 'Java' },
{ key: 'C' },
{ key: 'C++' },
{ key: 'PHP' },
{ key: 'Javascript' },
{ key: 'Python' },
{ key: 'Kotlin' },
{ key: 'Scala' },
{ key: 'NodeJS' },
{ key: 'Angular' },
{ key: 'VueJS' },
{ key: 'ReactJS' },
{ key: 'Android' },
{ key: 'iOS' },
{ key: 'Go' },
{ key: 'Ruby' },
{ key: 'EmberJS' },
{ key: 'C#' },
{ key: 'jQuery' },
{ key: 'Flutter' }
]
}
}
GetGridView(item) {
Alert.alert(item);
}
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={this.state.GridView}
renderItem={({ item }) => <View style={styles.
GridViewBlockStyle}>
<Text style={styles.GridViewInsideTextItemStyle}
onPress={this.GetGridView.bind(this, item.key)} > {item.key} </Text>
</View>}
numColumns={2}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
flex: 1,
margin: 10,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0
},
GridViewBlockStyle: {
justifyContent: 'center',
flex: 1,
alignItems: 'center',
height: 100,
margin: 5,
backgroundColor: 'purple'
}
,
GridViewInsideTextItemStyle: {
color: '#fff',
padding: 10,
fontSize: 18,
justifyContent: 'center',
},
});
AppRegistry.registerComponent('App', () => App);
Run
sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android
More Topics,
