react-native-dialer-code-picker ⚡⚡⚡

This library offers a multi-language country dialer code picker with advanced search functionality, delivering a smooth and high-performance user experience. Designed to be fully cross-platform, it supports React Native and Expo out of the box.

🚀 Built for Performance: Enhanced with optimized rendering and efficient animations for seamless navigation using FlashList.
🐞 Issue-Free Experience: Developed with careful attention to detail, addressing common issues found in similar libraries.
🔄 Flexible & Customizable: Easily adaptable to your design needs with custom templates and styling options.

Inspired by the popular react-native-country-codes-picker, but enhanced with better performance and stability. If you're looking for a modern alternative with optimized rendering and customization capabilities, this is the picker for you.

Looking for a specific country or locale? Feel free to contribute with a PR. ⚡⚡⚡

🚀 Installation

You can install it using npm or yarn:

# Using npm
npm install react-native-dialer-code-picker @shopify/flash-list

# Using yarn
yarn add react-native-dialer-code-picker @shopify/flash-list

Note: This library uses FlashList from @shopify/flash-list for improved performance, so make sure to install it as a dependency.

⚙️ Basic Usage

Using `DialerPicker` (Built-in Modal)

The DialerPicker component includes a built-in modal, so you can directly use it without handling modal logic manually.

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { DialerPicker } from 'react-native-dialer-code-picker';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [selectedDialer, setSelectedDialer] = useState('');

  const handleDialerSelect = (item) => {
    setSelectedDialer(item.dial_code);
    setIsVisible(false);
  };

  return (
    <View>
      <Button title="Select Dialer Code" onPress={() => setIsVisible(true)} />
      <Text>Selected Dialer Code: {selectedDialer}</Text>
      <DialerPicker
        isVisible={isVisible}
        onDialCodeSelect={handleDialerSelect}
        onClose={() => setIsVisible(false)}
        searchPlaceholder="Search by country or code"
        lang="en"
      />
    </View>
  );
};

export default App;

💡 Advanced Usage

Using `DialerList` (Custom Modal or Bottom Sheet)

If you want to use your own modal (e.g., BottomSheetModal), you can import DialerList and handle the modal separately.

import React, { useState, useCallback } from 'react';
import { View, Button } from 'react-native';
import { DialerList } from 'react-native-dialer-code-picker';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet';

const BottomSheetDialer = () => {
  const [bottomSheetRef, setBottomSheetRef] = useState(null);

  const openSheet = useCallback(() => {
    bottomSheetRef?.present();
  }, [bottomSheetRef]);

  return (
    <BottomSheetModalProvider>
      <View>
        <Button title="Open Dialer" onPress={openSheet} />
        <BottomSheetModal
          ref={setBottomSheetRef}
          index={0}
          snapPoints={['50%']}
        >
          <DialerList
            onDialCodeSelect={(item) => {
              console.log(item.dial_code);
              bottomSheetRef?.dismiss();
            }}
            lang="en"
          />
        </BottomSheetModal>
      </View>
    </BottomSheetModalProvider>
  );
};

Comparison: `DialerPicker` vs. `DialerList`

Feature	`DialerPicker` (Built-in Modal)	`DialerList` (Standalone)
Includes a modal?	✅ Yes	❌ No
Manages its own state?	✅ Yes	❌ No
Custom modal support?	❌ No, uses default modal	✅ Yes
Ideal for...?	Quick implementation	Full customization

📚 Props and API Details

DialerPicker Props

Prop	Type	Description	Required	Default
`isVisible`	`boolean`	Controls the visibility of the modal.	✅	`false`
`enableModalAvoiding`	`boolean`	Enables keyboard avoiding behavior on Android.	❌	`false`
`disableBackdrop`	`boolean`	If `true`, disables the backdrop behind the modal.	❌	`false`
`androidWindowSoftInputMode`	`string`	Defines keyboard behavior on Android (e.g., `"pan"`).	❌	`-`
`searchPlaceholder`	`string`	Placeholder text for the search input.	❌	`"Search..."`
`searchPlaceholderTextColor`	`string`	Color of the placeholder text in the search input field.	❌	`-`
`searchNotFoundMessage`	`string`	Message displayed when no results are found.	❌	`-`
`lang`	`string`	Selected language for country names.	✅	`"en"`
`defaultDialCode`	`string`	Default dial code to be pre-selected.	❌	`-`
`otherCountriesHeaderTitle`	`string`	Title for the "Other Countries" section.	❌	`-`
`searchContainerStyle`	`StyleProp<ViewStyle>`	Custom styles for the search input container.	❌	`-`
`excludedCountries`	`string[]`	List of country codes to exclude from the picker.	❌	`[]`
`showOnly`	`string[]`	List of country codes to exclusively show.	❌	`[]`
`popularCountries`	`string[]`	List of popular countries to show at the top.	❌	`[]`
`onDialCodeSelect`	`(item: DialerCode) => void`	Callback when a dialer code is selected.	✅	`-`
`onBackdropPress`	`() => void`	Callback when the backdrop is pressed.	❌	`-`
`onClose`	`() => void`	Callback when the modal is closed.	❌	`-`
`itemTemplate`	`(props: DialerItemTemplateProps) => JSX.Element`	Custom template to render each item.	❌	`DialerButton`
`headerComponent`	`(props: DialerListHeaderComponentProps) => JSX.Element`	Custom component for the list header.	❌	`-`
`style`	`DialerStyle`	Style object to customize the picker.	❌	`-`
`showVerticalScrollIndicator`	`boolean`	Whether to show the vertical scroll indicator. Default is `false`.	❌	`false`

DialerList Props

Prop	Type	Description	Required	Default
`excludedCountries`	`string[]`	List of country codes to exclude.	❌	`[]`
`showOnly`	`string[]`	List of country codes to exclusively show.	❌	`[]`
`popularCountries`	`string[]`	List of popular country codes displayed at the top.	❌	`[]`
`onDialCodeSelect`	`(item: DialerCode) => void`	Callback triggered when a dial code is selected.	✅	`-`
`lang`	`string`	Language code for country names.	✅	`"en"`
`headerComponent`	`(props: DialerListHeaderComponentProps) => JSX.Element`	Custom component for the list header.	❌	`-`
`itemTemplate`	`(props: DialerItemTemplateProps) => JSX.Element`	Custom component for rendering each item.	❌	`DialerButton`
`style`	`DialerStyle`	Style object to customize the component.	❌	`-`
`searchContainerStyle`	`StyleProp<ViewStyle>`	Custom styles for the search container.	❌	`-`
`showVerticalScrollIndicator`	`boolean`	Whether to show the vertical scroll indicator. Default is `false`.	❌	`false`
`searchValue`	`string`	Text input for filtering countries by name or dial code.	❌	`-`

📝 License

This project is licensed under the MIT License.
See the LICENSE file for more details.

🤝 Contributions

Contributions are welcome!
If you find a bug or want to add a new feature, please open an Issue or a Pull Request.