# react-native-currency-picker

> React native library country picker

Latest version **1.0.5** (published 2020-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-currency-picker
pnpm add react-native-currency-picker
yarn add react-native-currency-picker
bun add react-native-currency-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-11-18 |
| First published | 2020-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 204.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Alien |
| Maintainers | alien9996 |
| Keywords | react-native, android, IOS, library, country, currency, region, picker, currency-picker |

## Links

- npm: https://www.npmjs.com/package/react-native-currency-picker
- Repository: https://github.com/alien9996/react-native-currency-picker
- Homepage: https://github.com/alien9996/react-native-currency-picker.git#readme
- Issues: https://github.com/alien9996/react-native-currency-picker.git/issues
- npm.io page: https://npm.io/package/react-native-currency-picker

## Dependencies (3)

- [fuse.js](https://npm.io/package/fuse.js.md) ^6.4.1
- [react-native-auto-height-image](https://npm.io/package/react-native-auto-height-image.md) ^3.2.3
- [react-native-status-bar-height](https://npm.io/package/react-native-status-bar-height.md) ^2.5.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2020-11-18
- 1.0.4 — 2020-11-09
- 1.0.3 — 2020-11-06
- 1.0.2 — 2020-11-05
- 1.0.1 — 2020-11-05
- 1.0.0 — 2020-11-04

## README

# react-native-currency-picker

**Various currency picker** for **iOS** and **Android**

## Demo

<img src="https://github.com/alien9996/library-gif/blob/main/courrency_gif.gif?raw=true" width="350">

## Getting started

`$ npm install react-native-currency-picker --save`
<br>
OR
<br>
`$ yarn add react-native-currency-picker`

## Example

```javascript
import CurrencyPicker from "react-native-currency-picker"

let currencyPickerRef = undefined;

// use currencyPickerRef
currencyPickerRef.open();
currencyPickerRef.close();

<CurrencyPicker
  currencyPickerRef={(ref) => {currencyPickerRef = ref}}
  enable={true}
  darkMode={false}
  currencyCode={"EUR"}
  showFlag={true}
  showCurrencyName={true}
  showCurrencyCode={true}
  onSelectCurrency={(data) => { console.log("DATA", data) }}
  onOpen={() => {console.log("Open")}}
  onClose={() => {console.log("Close")}}
  showNativeSymbol={true}
  showSymbol={false}
  containerStyle={{
      container: {},
      flagWidth: 25,
      currencyCodeStyle: {},
      currencyNameStyle: {},
      symbolStyle: {},
      symbolNativeStyle: {}
  }}
  modalStyle={{
      container: {},
      searchStyle: {},
      tileStyle: {},
      itemStyle: {
        itemContainer: {},
        flagWidth: 25,
        currencyCodeStyle: {},
        currencyNameStyle: {},
        symbolStyle: {},
        symbolNativeStyle: {}
      }
  }}
  title={"Currency"}
  searchPlaceholder={"Search"}
  showCloseButton={true}
  showModalTitle={true}
/>

```

## Options

| Props                | Default | Options/Info |
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| enable (Boolean)             | true    | Show component that choose the currency. |
| currencyPickerRef (Function) | null    | Get the open() and close() modal methods. |
| darkMode (Boolean)           | true    | Dark mode for currency modal. |
| currencyCode (String)        | USD     | Currency code displayed is selected at start. |
| onSelectCurrency (Function)  | null    | Called when the user chooses a currency and returns information for the selected currency. |
| onOpen (Function)            | null      | Called when the open modal.                                                              |
| onClose (Function)           | null      | Called when the close modal.                                                             |
| showNativeSymbol (Boolean)   | true    | Show the native symbol of the currency. |
| showSymbol (Boolean)         | false   | Show the symbol of the currency. |
| showFlag (Boolean)           | true    | Show the icon of the currency. |
| showCurrencyName (Boolean)   | true    | Show the name of the currency. |
| showCurrencyCode (Boolean)   | true    | Show the code of the currency. |
| title  (String)              | "Currency"  | The title of the modal select currency. |
| showCloseButton  (Boolean)   | true    | Show the close button of the modal select currency. |
| showModalTitle  (Boolean)    | true    | Show the title of the modal select currency. |
| containerStyle  (Object)     | null    | Style for component that choose the currency. <br> **Note**: See more details below. |
| modalStyle  (Object)         | null    | Style for modal select currency. <br> **Note**: See more details below. |
| renderChildren (Component)   | null    | The child component replaces the component element of the library    |


## containerStyle

| Props                | Default | Options/Info |
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| container (Object)     | style          | Style for component container. |
| flagWidth (number)     | default: 25    | Width for the icon currency. |
| currencyCodeStyle (Object)   | style      | Style for currency code. |
| currencyNameStyle (Object)     | style  | Style for currency name. |
| symbolStyle (Object)   | style      | Style for currency symbol. |
| symbolNativeStyle (Object)   | style      | Style for currency native symbol. |


## modalStyle

| Props                | Default | Options/Info |
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| container (Object)     | style      | Style for modal container |
| searchStyle (Object)   | style      | Style for modal search input  |
| tileStyle (Object)     | style      | Style for modal title |
| itemStyle (Object)     | style      | Style for item select currency <br> **Note**: See more details below. |


## itemStyle

| Props                | Default | Options/Info |
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| itemContainer (Object)     | style      | Style for item currency container |
| flagWidth (number)     | default: 25    | Width for the icon currency |
| currencyCodeStyle (Object)   | style    | Style for currency code   |
| currencyNameStyle (Object)     | style  | Style for currency name |
| symbolStyle (Object)   | style      | Style for currency symbol |
| symbolNativeStyle (Object)   | style      | Style for currency native symbol |


### Thank you for your interest!

---
_Source: https://npm.io/package/react-native-currency-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._