Skip to main content
Version: 3.4.2

Pricing

Pricing is a convenience component used to display features and pricing tables in a beautiful and engaging way.

Pricing Component

Usage

import { PricingCard } from 'react-native-elements';

<PricingCard
color="#4f9deb"
title="Free"
price="$0"
info={['1 User', 'Basic Support', 'All Core Features']}
button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
/>;

Props


Reference

button

button information (required)

TypeDefault
{...Button props}
OR
component
none

color

color scheme for button & title

TypeDefault
stringnone

containerStyle

outer component styling (optional)

TypeDefault
object (style)inherited styling

info

pricing information (optional)

TypeDefault
array of stringsnone

infoStyle

specify pricing information style

TypeDefault
style (object)none

onButtonPress

function to be run when button is pressed

TypeDefault
anynone

price

price (required)

TypeDefault
stringnone

pricingStyle

specify pricing text style

TypeDefault
style (object)none

title

title (required)

TypeDefault
stringnone

titleStyle

specify title text style

TypeDefault
style (object)none

wrapperStyle

inner wrapper component styling (optional)

TypeDefault
object (style)inherited styling