rn-currency-picker

React native currency picker that works!

Installation

npm install rn-currency-picker

OR

yarn add rn-currency-picker

Demo

Usage

import { CurrencyPickerComponent } from 'rn-currency-picker'


export default function App() {
  const currencyPickerRef = React.useRef < CurrencyPickerRef > ();

  <Button
    title={'Open picker'}
    onPress={() => currencyPickerRef.current?.open()}
  />

  <Button
    title={'Close picker'}
    onPress={() => currencyPickerRef.current?.close()}
  />

  return <CurrencyPickerComponent
    currencyPickerRef={(ref) => {
      currencyPickerRef.current = ref;
    }}
    enable={true}
    darkMode={false}
    currencyCode={"NGN"}
    showFlag={true}
    showCurrencyName={true}
    showCurrencyCode={true}
    onSelectCurrency={(data: CurrencyData) => {
      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 for the choosen the currency.
currencyPickerRef (Function)	null	Get the open() and close() modal methods.
darkMode (Boolean)	false	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(CurrencyData). See types below
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

Types

export type CurrencyData = {
  symbol: string;
  name: string;
  symbol_native: string;
  decimal_digits: number;
  rounding: number;
  code: string;
  name_plural: string;
  flag_emoji: string;
};

export type CurrencyPickerProps = {
  onSelectCurrency?: (data: CurrencyData) => void;
  currencyCode?: Currency | string;
  showFlag?: boolean;
  showCurrencyName?: boolean;
  showSymbol?: boolean;
  showNativeSymbol?: boolean;
  darkMode?: boolean;
  renderChildren?: React.ReactNode;
  showCurrencyCode?: boolean;
  currencyPickerRef?: (methods: CurrencyPickerRef) => void;
  enable?: boolean;
  onOpen?: () => void;
  onClose?: () => void;
  containerStyle?: ItemStyle;
  modalStyle?: DialogCurrencyProps['modalStyle'];
  title?: string;
  searchPlaceholder?: string;
  textEmpty?: string;
  showCloseButton?: boolean;
  showModalTitle?: boolean;
};

export type ItemStyle = {
  itemContainer?: ViewStyle;
  flagWidth?: number;
  currencyCodeStyle?: TextStyle;
  currencyNameStyle?: TextStyle;
  symbolStyle?: TextStyle;
  symbolNativeStyle?: TextStyle;
  container: ViewStyle;
};

export type ModalStyle = {
  itemStyle: ItemStyle;
  container: ViewStyle;
  searchStyle?: ViewStyle;
  tileStyle?: TextStyle;
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Credits

This library is inspired by react-native-currency-picker

License

MIT

---

Made with create-react-native-library