Grid View in React Native

Pandiyan Mani

·

Follow

3 min read

·

Mar 13, 2023

--

Listen

Share

Lets see how to create a Grid View using FlatList so I am going to create a Menus of Food Item so the number of columns on each row will be 2.

Before starting lets see the sample Output Screenshot how it will look like once we have done with this implementation.

First we need to create a dummy data to load so for that i am going to create a file named dummyData.tsx which has list of categories

import Category from "../Model/Category";

export const CATEGORIES = [
new Category('c1', 'Indian', '#f5428d'),
new Category('c2', 'Chinese', '#f54242'),
new Category('c3', 'Hamburgers', '#f5a442'),
new Category('c4', 'German', '#368dff'),
new Category('c5', 'BreakFast', '#9eecff'),
new Category('c6', 'French', '#b9ffb0'),
new Category('c7', 'Asian', '#ffc7ff'),
new Category('c8', 'Exotic', '#47fced')
];

Next we have to create a class for Category which should have id, title and color as default constructor , so create a file named Category.tsx and paste the below code.

class Category {
    constructor(id, title, color) {
        this.id = id;
        this.title = title;
        this.color = color;
    }
}

export default Category;

Next lets jump on the main session that is item view for the FlatList/Grid. we will create a file named GridItem.tsx which holds single item view of the FlatList

import React from "react";
import { Pressable, StyleSheet, Text, View, Platform } from "react-native";

const GridItem = (props) => {
    return (
    <View style={[style.gridItem, { backgroundColor: props.color }]}>
    <Pressable
    style={style.button}
    android_ripple={{ color: '#ccc' }}
    >
    <View style={[style.innerContainer]}>
    <Text style={style.textStyling}>{props.title}</Text>
    </View>
    </Pressable>
    </View>
    )
}

export default GridItem;

const style = StyleSheet.create({
    textStyling: {
            fontSize: 20,
            fontStyle: 'italic',
            color: 'black'
    },
    innerContainer: {
            flex: 1,
            padding: 16,
            justifyContent: 'center',
            alignItems: 'center'

    },
    button: {
            flex: 1
    },
    gridItem: {
        flex: 1,
        margin: 5,
        height: 150,
        backgroundColor: 'white',
        borderRadius: 4,
        elevation: 4,
        shadowColor: 'black',
        shadowOpacity: 0.25,
        shadowOffset: { width: 0, height: 2 },
        shadowRadius: 8,
        overflow: Platform.OS === 'android' ? 'hidden' : 'visible'
    }
})

The above code is straight forward you can see a View for outer inside that we have a Pressable for click operation so we added some Ripple effect so when user taps he can feel some touch response inside that we have View whicch holds Text.

After that we will create MenuScreen.tsx file which is main screen which is caalled App.tsx

import React from 'react';
import { StyleSheet, Dimensions, View, ImageBackground, FlatList, Text } from 'react-native';
import GridItem from '../Component/GridItem';
import { CATEGORIES } from '../Data/dummyData';

const MenuScreen = () => {
    return (
    <View style={styles.viewConatiner}>
    <ImageBackground
    resizeMode='cover'
    style={styles.backgroundImage}
    source={require('../asset/image/backimagelogin.jpg')} />

    <FlatList
    data={CATEGORIES}
    numColumns={2}
    keyExtractor={(item) => item.id}
    renderItem={({ index, item }) => (
        <GridItem title={item.title} color={item.color} />
        )} />

    </View>
    )
}


const styles = StyleSheet.create({
    viewConatiner: {
            flex: 1
    },
    backgroundImage: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
        opacity: 0.4
    }
});
export default MenuScreen;

I added ImageBackground for Background with an image after that we have a FlatList with data from Categories and numColumns we defined as 2 and keyExtractor for unique Keys on the Grid and renderItem which points to the GridItem we have created.so the Final step is to call this from the App.tsx

import React from 'react';
import MenuScreen from './Screen/MenuScreen';


function App(): JSX.Element {
    return (
    <MenuScreen />
    );
}

export default App;

You can find the Source Code or GitHub Repository below:

https://github.com/Pandiyanmk/Grid-View-Using-FLatList.git