React Native

React Native - Basic Grid

import React, { Component } from 'react';
import { ScrollView, View, Text, Dimensions } from 'react-native';

const widthLeftSide = 0.7; // 70%
const widthDevice = Dimensions.get('window').width * widthLeftSide;
const column = 3;
const padding = 16;
const totalPadding = padding * (column * 2);
const cardBoxWidth = (widthDevice - totalPadding) / column;
const customPaddingRight = 4 * 6.5;
const categories = [
  {
    id: 1,
    name: 'Category 1'
  },
  {
    id: 2,
    name: 'Category 2'
  },
  {
    id: 3,
    name: 'Category 3'
  },
  {
    id: 4,
    name: 'Category 4'
  },
  {
    id: 5,
    name: 'Category 5'
  },
  {
    id: 6,
    name: 'Category 6'
  },
  {
    id: 7,
    name: 'Category 7'
  },
  {
    id: 8,
    name: 'Category 8'
  }
];

export class Grid extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          flexWrap: 'wrap',
          justifyContent: 'flex-start',
          paddingLeft: 16
        }}
      >
        {categories.map((element, elementIndex) => {
          return (
            <View
              key={element.id}
              style={{
                backgroundColor: '#fff',
                paddingRight: customPaddingRight,
                paddingVertical: 16
              }}
            >
              <View
                style={{
                  height: 330,
                  width: cardBoxWidth,
                  backgroundColor: 'rgba(0, 0, 0, 0.38)'
                }}
              >
                <Text>{element.name}</Text>
              </View>
            </View>
          );
        })}
      </View>
    );
  }
}
export default Grid;