<commit_before>---
id: pricing
title: Pricing
---

import useBaseUrl from '@docusaurus/useBaseUrl';

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

<img alt="Pricing Component" src={useBaseUrl('img/pricing.png')} />

## Usage

```js
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

- [`containerStyle`](#containerstyle)
- [`buttonFont`](#buttonfont)
- [`infoFont`](#infofont)
- [`pricingFont`](#pricingfont)
- [`titleFont`](#titlefont)
- [`wrapperStyle`](#wrapperstyle)
- [`price`](#price)
- [`onButtonPress`](#onbuttonpress)
- [`button`](#button)
- [`info`](#info)
- [`color`](#color)
- [`title`](#title)

---

## Reference

### `containerStyle`

outer component styling (optional)

|      Type      |      Default      |
| :------------: | :---------------: |
| object (style) | inherited styling |

---

### `infoStyle`

specify pricing information style

|      Type      | Default |
| :------------: | :-----: |
| style (object) |  none   |

---

### `pricingStyle`

specify pricing text style

|      Type      | Default |
| :------------: | :-----: |
| style (object) |  none   |

---

### `titleStyle`

specify title text style

|      Type      | Default |
| :------------: | :-----: |
| style (object) |  none   |

---

### `wrapperStyle`

inner wrapper component styling (optional)

|      Type      |      Default      |
| :------------: | :---------------: |
| object (style) | inherited styling |

---

### `price`

price (required)

|  Type  | Default |
| :----: | :-----: |
| string |  none   |

---

### `onButtonPress`

function to be run when button is pressed

| Type | Default |
| :--: | :-----: |
| any  |  none   |

---

### `button`

button information (required)

|                              Type                              | Default |
| :------------------------------------------------------------: | :-----: |
| {[...Button props](button.md#props)}<br/>**OR**<br/> component |  none   |

---

### `info`

pricing information (optional)

|       Type       | Default |
| :--------------: | :-----: |
| array of strings |  none   |

---

### `color`

color scheme for button & title

|  Type  | Default |
| :----: | :-----: |
| string |  none   |

---

### `title`

title (required)

|  Type  | Default |
| :----: | :-----: |
| string |  none   |
<commit_msg>Docs: Arranged props alphabetically in pricing.md (#2631)<commit_after>---
id: pricing
title: Pricing
---

import useBaseUrl from '@docusaurus/useBaseUrl';

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

<img alt="Pricing Component" src={useBaseUrl('img/pricing.png')} />

## Usage

```js
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

- [`button`](#button)
- [`buttonFont`](#buttonfont)
- [`color`](#color)
- [`containerStyle`](#containerstyle)
- [`info`](#info)
- [`infoFont`](#infofont)
- [`onButtonPress`](#onbuttonpress)
- [`price`](#price)
- [`pricingFont`](#pricingfont)
- [`title`](#title)
- [`titleFont`](#titlefont)
- [`wrapperStyle`](#wrapperstyle)

---

## Reference

### `button`

button information (required)

|                              Type                              | Default |
| :------------------------------------------------------------: | :-----: |
| {[...Button props](button.md#props)}<br/>**OR**<br/> component |  none   |

---

### `color`

color scheme for button & title

|  Type  | Default |
| :----: | :-----: |
| string |  none   |

---

### `containerStyle`

outer component styling (optional)

|      Type      |      Default      |
| :------------: | :---------------: |
| object (style) | inherited styling |

---

### `info`

pricing information (optional)

|       Type       | Default |
| :--------------: | :-----: |
| array of strings |  none   |

---

### `infoStyle`

specify pricing information style

|      Type      | Default |
| :------------: | :-----: |
| style (object) |  none   |

---

### `onButtonPress`

function to be run when button is pressed

| Type | Default |
| :--: | :-----: |
| any  |  none   |

---

### `price`

price (required)

|  Type  | Default |
| :----: | :-----: |
| string |  none   |

---

### `pricingStyle`

specify pricing text style

|      Type      | Default |
| :------------: | :-----: |
| style (object) |  none   |

---

### `title`

title (required)

|  Type  | Default |
| :----: | :-----: |
| string |  none   |

---

### `titleStyle`

specify title text style

|      Type      | Default |
| :------------: | :-----: |
| style (object) |  none   |

---

### `wrapperStyle`

inner wrapper component styling (optional)

|      Type      |      Default      |
| :------------: | :---------------: |
| object (style) | inherited styling |

{'fraction_non_alphanumeric': 0.2676083591331269, 'fraction_numerical': 0.0023219814241486067, 'mean_word_length': 1.9402730375426622, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2608617', 'n_tokens_mistral': 1740, 'n_tokens_neox': 1678, 'n_words': 362}