SectionListGrid

We have a list component in react native, but we have a section list component in react native as well, but we don't have a component for section grid list view. It helps to easily create a grid list view with your own style and customize the view.

Attachments

Installation

yarn add react-native-section-list-grid

or

npm install react-native-section-list-grid --save

Example

Code

import React from 'react';
import { View, Text } from 'react-native';
import SectionListGrid from 'react-native-section-list-grid';

export default ExampleOne = () => {
    const data = [
        {
            title: "Main dishes",
            data: ["Pizza", "Burger", "Risotto"]
        },
        {
            title: "Sides",
            data: ["French Fries", "Onion Rings", "Fried Shrimps"]
        },
        {
            title: "Drinks",
            data: ["Water", "Coke", "Beer"]
        },
        {
            title: "Desserts",
            data: ["Cheese Cake", "Ice Cream"]
        }
    ];

    return (
        <View style={{ marginTop: 50 }}>
            <SectionListGrid
                data={data}
                numItemsRow={2}
                renderItem={(subObj, subIndex) => {
                    <Text style={{ margin: 5, backgroundColor: 'grey' }} key={subIndex}>
                        {subObj}</Text>
                }}
                renderHeader={(obj, index) => {
                    <Text style={{ margin: 5, backgroundColor: 'green' }}>
                        {obj.title}</Text>
                }}
            />
        </View>
    );
};

Check the code here

Props

| Prop | Default | Type | Description | | :------------------------------ | :--------------------------------: | :-------------: | :----------------------------------------- | | data | [] required |array | Data to use in renderSectionList | | numItemsRow | 3 |number | number of item per row | | itemViewStyle | {} |ViewPropTypes | style of grid item view | | listStyle | {} |ViewPropTypes | style of entire listview | | cellStyle | {} |ViewPropTypes | style of one section view | | headerStyle | {} |TextPropTypes | style of section header text | | renderItem | {} |render | create own grid cell view | | renderHeader | {} |render | create own section header view |

Author

Loganathan Rajamani