saleel / react-native-super-grid

Responsive Grid View for React Native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Image is not show

kush4999 opened this issue · comments

import React from 'react';
import { StyleSheet, View, Text,Image,ImageBackground} from 'react-native';
import { FlatGrid } from 'react-native-super-grid';

export default function Example() {
const [items, setItems] = React.useState([
{ name: 'TURQUOISE', code: '#1abc9c', imageurl:'http://innoviussoftware.com/kush/Images/10.jpg'},
{ name: 'EMERALD', code: '#2ecc71', imageurl:'http://innoviussoftware.com/kush/Images/10.jpg' },
{ name: 'PETER RIVER', code: '#3498db', imageurl:'http://innoviussoftware.com/kush/Images/10.jpg' },
{ name: 'AMETHYST', code: '#9b59b6', imageurl:'http://innoviussoftware.com/kush/Images/10.jpg' },
{ name: 'WET ASPHALT', code: '#34495e', imageurl:'http://innoviussoftware.com/kush/Images/10.jpg' },
{ name: 'GREEN SEA', code: '#16a085' , imageurl:'http://innoviussoftware.com/kush/Images/10.jpg'},
{ name: 'NEPHRITIS', code: '#27ae60', imageurl:'http://innoviussoftware.com/kush/Images/10.jpg' },
{ name: 'BELIZE HOLE', code: '#2980b9', imageurl:'http://innoviussoftware.com/kush/Images/10.jpg' },

]);

return (
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
// staticDimension={300}
// fixed
spacing={10}
renderItem={({ item }) => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
{item.name}
{item.code}


)}
/>
);
}

const styles = StyleSheet.create({
gridView: {
marginTop: 10,
flex: 1,
},
itemContainer: {
justifyContent: 'flex-end',
borderRadius: 5,
padding: 10,
height: 150,
},
itemName: {
fontSize: 16,
color: '#000',
fontWeight: '600',
},
itemCode: {
fontWeight: '600',
fontSize: 12,
color: '#000',
},
});

any one can help?
Thank you.

You don't have any code in renderItem to display your image. You need to create a component inside renderItem and display the item.imageurl