@youssefprodev/rn-currency-picker v0.1.3

@youssefprodev/rn-currency-picker

A high-performance and customizable React Native Currency Picker built with TypeScript, featuring an enhanced UI and advanced search functionality powered by Fuse.js. This picker supports over 180+ currencies and leverages @shopify/flash-list to optimize performance, especially for large data sets.

Key Features

• Over 180+ Currencies: Supports a comprehensive list of currencies, ensuring global coverage.
• Optimized for Performance: Utilizes @shopify/flash-list, a high-performance list component that efficiently renders large lists, reducing lag and improving scroll performance.
• Built with TypeScript: Ensures robust type safety and a smoother development experience, reducing bugs and improving code quality.
• Enhanced UI: The picker comes with a clean and intuitive design, offering better user interaction and customization options.
• Fast and Fuzzy Search: Integrated with Fuse.js for fast and flexible search capabilities, allowing users to quickly find the currency they need, even with partial or misspelled inputs.

Installation

You can install the package using npm or yarn:

npm install @youssefprodev/rn-currency-picker

or

yarn add @youssefprodev/rn-currency-picker

Demo

Check out the live demo of the picker in action:

Usage

Here’s a basic example of how to use the CurrencyPickerComponent:

import React from 'react';
import { Button } from 'react-native';
import { CurrencyPickerComponent } from '@youssefprodev/rn-currency-picker';

export default function App() {
  const currencyPickerRef = React.useRef(null);

  return (
    <>
      <Button
        title="Open picker"
        onPress={() => currencyPickerRef.current?.open()}
      />
      <Button
        title="Close picker"
        onPress={() => currencyPickerRef.current?.close()}
      />
      <CurrencyPickerComponent
        currencyPickerRef={(ref) => (currencyPickerRef.current = ref)}
        enable={true}
        darkMode={false}
        currencyCode="NGN"
        showFlag={true}
        showCurrencyName={true}
        showCurrencyCode={true}
        onSelectCurrency={(data) => console.log('Selected Currency:', data)}
        onOpen={() => console.log('Picker opened')}
        onClose={() => console.log('Picker closed')}
        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="Select a Currency"
        searchPlaceholder="Search for a currency"
        showCloseButton={true}
        showModalTitle={true}
      />
    </>
  );
}

Performance Optimizations

• @shopify/flash-list: The integration of FlashList ensures smooth and efficient rendering, especially when dealing with large sets of over 180 currencies. This makes the picker responsive and minimizes potential lag during scrolling.
• Fuse.js for Search: The picker uses Fuse.js, a lightweight fuzzy-search library, to provide users with fast and flexible search options. Even with incomplete or inaccurate input, Fuse.js can quickly find relevant currencies, improving the overall user experience.

Props

containerStyle

modalStyle

itemStyle

Currency Data Type

The onSelectCurrency function returns the following data:

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

Contributing

If you’d like to contribute, please see the contributing guide.

Credits

This library was inspired by rn-currency-picker.

License

MIT License. See the LICENSE file for details.

Creato con create-react-native-library.

Questa versione mette