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,

Popular posts from this blog

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Java Stream API - How to convert List of objects to another List of objects using Java streams?

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Java, Spring Boot Mini Project - Library Management System - Download

ReactJS, Spring Boot JWT Authentication Example

Top 5 Java ORM tools - 2024

Java - Blowfish Encryption and decryption Example

Spring boot video streaming example-HTML5

Google Cloud Storage + Spring Boot - File Upload, Download, and Delete