npm package: @raiden16f7/react-native-currency-picker
Description: React native library country picker
Author: Raiden-16F7
Latest version: 1.2.0

# react-native-currency-picker

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

## Changes from original version

++ Added renderChildrenStyle prop and text slicing for long country names

++ Added prop for modal animation

++ Changed background color to #FAFAFF

++ StatusBar not hidden on Android

++ container padding adjusted for android

## Demo

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

## Getting started

`$ npm install @raiden16f7/react-native-currency-picker --save`
<br>
OR
<br>
`$ yarn add @raiden16f7/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                                             |
| modalAnimation (animationType) | slide   | Modal opening/closing animation type                                  |
| 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  |

## renderChildrenStyle

| Props              | Default | Options/Info                   |
| ------------------ | ------- | ------------------------------ |
| container (Object) | style   | Style for component container. |

### Thank you for your interest!