@raiden16f7/react-native-currency-picker NPM

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