Flatlist 3 colmun grid view

FlatListGrid.js

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

const FlatListGrid = ({ onEndReached }) => {
  const numColums = 3;

  return (
    <FlatList
      style={{ flex: 1 }}
      // refreshing={loading}
      // onRefresh={refresh}
      showsVerticalScrollIndicator={false}
      // keyExtractor={() => Helpers.generateKey()}
      numColumns={3}
      contentContainerStyle={{ width: '100%', alignItems: 'center' }}
      style={{}}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.01}
      data={state.products}
      renderItem={({ item, index }) => (
        <View
          style={{
            width: Math.floor(0.33 * width),
            // marginHorizontal: item.margin ? RFValue(1) : 0,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#aaa',
            height: Math.floor(0.33 * width),
            margin: Math.floor(0.01 * width)
          }}
        >
          <Text style={{ color: '#fff' }}>{item.index}</Text>
        </View>
      )}
    />
  );
};

export default FlatListGrid;