Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
64 views3 pages

Grid View

This document defines a React Native component to display data in a grid view layout. It contains a DATA array with objects for each grid item, including an id, image, and title. It defines GridItems and RenderItems components to display each item. Finally, it renders the grid with the FlatList component, mapping over the DATA array and specifying 3 columns with the numColumns property. Styles are defined to layout and style the grid items and container.

Uploaded by

Reddy pavithra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
64 views3 pages

Grid View

This document defines a React Native component to display data in a grid view layout. It contains a DATA array with objects for each grid item, including an id, image, and title. It defines GridItems and RenderItems components to display each item. Finally, it renders the grid with the FlatList component, mapping over the DATA array and specifying 3 columns with the numColumns property. Styles are defined to layout and style the grid items and container.

Uploaded by

Reddy pavithra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React from 'react';

import { View, Text, StyleSheet, Image, FlatList } from 'react-native';

const DATA = [
{
id: 1,
image: [require('../asset/prmo8.png')],
title: 'Health & Pharamcy',
},
{
id: 2,
image: [require('../asset/prmo5.png')],
title: 'Beauty',
},
{
id: 3,
image: [require('../asset/prmo8.png')],
title: 'Luxury Beauty',
},
{
id: 4,
image: [require('../asset/prmo5.png')],
title: 'Professional Hair',
},
{
id: 5,
image: [require('../asset/prmo3.png')],
title: 'Mom & Baby',
},
{
id: 6,
image: [require('../asset/prmo5.png')],
title: 'Toiletries',
},
{
id: 7,
image: [require('../asset/prmo8.png')],
title: 'Electrical',
},
{
id: 8,
image: [require('../asset/prmo5.png')],
title: 'Home',
},
{
id: 9,
image: [require('../asset/prmo8.png')],
title: 'Brand A-Z',
},
{
id: 10,
image: [require('../asset/prmo5.png')],
title: 'Toiletries',
},
{
id: 11,
image: [require('../asset/prmo8.png')],
title: 'Electrical',
},
{
id: 12,
image: [require('../asset/prmo5.png')],
title: 'Home',
},
];

const GridItems = ({ image, title }) => {


return (
<View style={styles.subcontainer}>
<Image style={{ height: 120, width: 120, borderTopLeftRadius: 8,
borderTopRightRadius: 8 }} source={image[0]}></Image>
<View style={{width: 170, height: 130,
borderRadius:120,backgroundColor:'#cccadb',marginTop:-13 }}>
<Text style={{ fontSize: 12, fontWeight: 'bold', textAlign: "center",
paddingHorizontal: 10, paddingVertical: 15 }}>{title}</Text>
</View>
</View>
);
};

const Renderitems = (itemData) => {


return (
<GridItems {...itemData.item} />
)
}

// const sapertor=()=>{
// return(
// <View styles={{padding:5}}></View>
// )
// }

const GridView = () => {


return (
<View style={styles.container}>
<FlatList
data={DATA}
numColumns={3}
renderItem={Renderitems}
showsVerticalScrollIndicator={false}
// ItemSeparatorComponent={sapertor}
keyExtractor={(item) => item.id} />
</View>
)
}

const styles = StyleSheet.create({


container: {
backgroundColor: '#eef0e6',
paddingLeft: 5,
paddingRight: 5,
paddingVertical: 100
},
subcontainer: {
overflow:'hidden',
borderRadius: 8,
height: 145,
width: 122,
marginVertical:2.5,
marginHorizontal:2.5,
// marginLeft:20,
alignItems: 'center',
},
})
export default GridView;

You might also like