react native grid view 1

react native grid view

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

export default function Example() {
  const [items, setItems] = React.useState([
    { name: 'TURQUOISE', code: '#1abc9c' },
    { name: 'EMERALD', code: '#2ecc71' },
    { name: 'PETER RIVER', code: '#3498db' },
    { name: 'AMETHYST', code: '#9b59b6' },
    { name: 'WET ASPHALT', code: '#34495e' },
    { name: 'GREEN SEA', code: '#16a085' },
    { name: 'NEPHRITIS', code: '#27ae60' },
    { name: 'BELIZE HOLE', code: '#2980b9' },
    { name: 'WISTERIA', code: '#8e44ad' },
    { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
    { name: 'SUN FLOWER', code: '#f1c40f' },
    { name: 'CARROT', code: '#e67e22' },
    { name: 'ALIZARIN', code: '#e74c3c' },
    { name: 'CLOUDS', code: '#ecf0f1' },
    { name: 'CONCRETE', code: '#95a5a6' },
    { name: 'ORANGE', code: '#f39c12' },
    { name: 'PUMPKIN', code: '#d35400' },
    { name: 'POMEGRANATE', code: '#c0392b' },
    { name: 'SILVER', code: '#bdc3c7' },
    { name: 'ASBESTOS', code: '#7f8c8d' },
  ]);

  return (
     (
        
          {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: '#fff',
    fontWeight: '600',
  },
  itemCode: {
    fontWeight: '600',
    fontSize: 12,
    color: '#fff',
  },
});

Here is what the above code is Doing:
1. We’re importing the FlatGrid component from react-native-super-grid.
2. We’re creating a state variable called items and initializing it with an array of objects.
3. We’re rendering the FlatGrid component and passing the items array as the data prop.
4. We’re passing the itemDimension prop with a value of 130. This is the width and height of each item in the grid.
5. We’re passing the spacing prop with a value of 10. This is the spacing between each item in the grid.
6. We’re passing the renderItem prop with a function that returns a View component. This function is called for each item in the data array.
7. We’re passing the style prop with a value of styles.gridView. This is the style for the FlatGrid component.
8. We’re passing the style prop with a value of styles.itemContainer. This is the style for each item in the grid.
9. We’re passing the style prop with a value of styles.itemName. This is the style for the name of each item in the grid.
10. We’re passing the style prop with a value of styles.itemCode. This is the style for the code of each item in the grid.

Similar Posts