0.1.2 • Published 5 months ago
rn-currency-picker v0.1.2
rn-currency-picker
React native currency picker that works!
Installation
npm install rn-currency-picker
OR
yarn add rn-currency-picker
Demo
Usage
import { CurrencyPicker } 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 <CurrencyPicker
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