Scribd
Upload
46 views

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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
46 views

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
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