1.0.5 • Published 3 years ago
react-native-currency-picker
Various currency picker for iOS and Android
Demo
Getting started
$ npm install react-native-currency-picker --save
OR
$ yarn add react-native-currency-picker
Example
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. Note: See more details below. |
| modalStyle (Object) | null | Style for modal select currency. 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 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!