Installation

Add the dependency:

npm i react-native-premium-table

Peer Dependencies

"react-native-easy-grid": ">= 0.2.2"

Usage

Import

import PremiumTable, { Item } from "react-native-premium-table";

Fundamental Usage

<PremiumTable data={mockData} />

Data Format

const mockData = [
  {
    name: "Data Sync",
    isBasic: true,
    isPremium: true,
  },
  {
    name: "Offline Usage",
    isBasic: true,
    isPremium: true,
  },
  {
    name: "Share with Friends",
    isBasic: true,
    isPremium: true,
  },
  {
    name: "Unlimited Items",
    isBasic: false,
    isPremium: true,
  },
  {
    name: "Unlimited Lists",
    isBasic: false,
    isPremium: true,
  },
  {
    name: "Insight",
    isBasic: false,
    isPremium: true,
  },
  {
    name: "Custom App Icons",
    isBasic: false,
    isPremium: true,
  },
  {
    name: "Historical Access",
    isBasic: false,
    isPremium: true,
  },
  {
    name: "Priority Support",
    isBasic: false,
    isPremium: true,
  },
];

Example Project 😍

You can checkout the example project 🥰

Simply run

npm i
react-native run-ios/android

should work of the example project.

Configuration - Props

Fundamentals

Property	Type	Default	Description
data	Item[]	undefined	set the formatted data

Customization (Optionals)

Property	Type	Default	Description
style	ViewStyle	default	set or override the style object for the `main container`
headerStyle	ViewStyle	default	set or override the style object for the `header`
basicText	string	"Basic"	change the basic column's text
premiumText	string	"Premium"	change the premium column's text
checkCircleStyle	ViewStyle	default	set or override the style object for the `check` circle
iconImageStyle	ImageStyle	default	set or override the style object for the `icon` image
titleTextStyle	TextStyle	default	set or override the style object for the `title` text
itemTextStyle	TextStyle	default	set or override the style object for the `item` text
checkImageSource	ImageSourcePropType	default	set your own `check` image
lockImageSource	ImageSourcePropType	default	set your own `lock` image