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

Getting started

$ npm install @raiden16f7/react-native-currency-picker --save OR $ yarn add @raiden16f7/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 | | 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 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!