1import React from 'react';
2import { StyleSheet, View, Text } from 'react-native';
3import { FlatGrid } from 'react-native-super-grid';
4
5export default function Example() {
6  const [items, setItems] = React.useState([
7    { name: 'TURQUOISE', code: '#1abc9c' },
8    { name: 'EMERALD', code: '#2ecc71' },
9    { name: 'PETER RIVER', code: '#3498db' },
10    { name: 'AMETHYST', code: '#9b59b6' },
11    { name: 'WET ASPHALT', code: '#34495e' },
12    { name: 'GREEN SEA', code: '#16a085' },
13    { name: 'NEPHRITIS', code: '#27ae60' },
14    { name: 'BELIZE HOLE', code: '#2980b9' },
15    { name: 'WISTERIA', code: '#8e44ad' },
16    { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
17    { name: 'SUN FLOWER', code: '#f1c40f' },
18    { name: 'CARROT', code: '#e67e22' },
19    { name: 'ALIZARIN', code: '#e74c3c' },
20    { name: 'CLOUDS', code: '#ecf0f1' },
21    { name: 'CONCRETE', code: '#95a5a6' },
22    { name: 'ORANGE', code: '#f39c12' },
23    { name: 'PUMPKIN', code: '#d35400' },
24    { name: 'POMEGRANATE', code: '#c0392b' },
25    { name: 'SILVER', code: '#bdc3c7' },
26    { name: 'ASBESTOS', code: '#7f8c8d' },
27  ]);
28
29  return (
30    <FlatGrid
31      itemDimension={130}
32      data={items}
33      style={styles.gridView}
34      // staticDimension={300}
35      // fixed
36      spacing={10}
37      renderItem={({ item }) => (
38        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
39          <Text style={styles.itemName}>{item.name}</Text>
40          <Text style={styles.itemCode}>{item.code}</Text>
41        </View>
42      )}
43    />
44  );
45}
46
47const styles = StyleSheet.create({
48  gridView: {
49    marginTop: 10,
50    flex: 1,
51  },
52  itemContainer: {
53    justifyContent: 'flex-end',
54    borderRadius: 5,
55    padding: 10,
56    height: 150,
57  },
58  itemName: {
59    fontSize: 16,
60    color: '#fff',
61    fontWeight: '600',
62  },
63  itemCode: {
64    fontWeight: '600',
65    fontSize: 12,
66    color: '#fff',
67  },
68});