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:

1# Using npm
2npm install react-native-dialer-code-picker @shopify/flash-list
3
4# Using yarn
5yarn 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.

1import React, { useState } from 'react';
2import { View, Button, Text } from 'react-native';
3import { DialerPicker } from 'react-native-dialer-code-picker';
4
5const App = () => {
6  const [isVisible, setIsVisible] = useState(false);
7  const [selectedDialer, setSelectedDialer] = useState('');
8
9  const handleDialerSelect = (item) => {
10    setSelectedDialer(item.dial_code);
11    setIsVisible(false);
12  };
13
14  return (
15    <View>
16      <Button title="Select Dialer Code" onPress={() => setIsVisible(true)} />
17      <Text>Selected Dialer Code: {selectedDialer}</Text>
18      <DialerPicker
19        isVisible={isVisible}
20        onDialCodeSelect={handleDialerSelect}
21        onClose={() => setIsVisible(false)}
22        searchPlaceholder="Search by country or code"
23        lang="en"
24      />
25    </View>
26  );
27};
28
29export 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.

1import React, { useState, useCallback } from 'react';
2import { View, Button } from 'react-native';
3import { DialerList } from 'react-native-dialer-code-picker';
4import {
5  BottomSheetModal,
6  BottomSheetModalProvider,
7} from '@gorhom/bottom-sheet';
8
9const BottomSheetDialer = () => {
10  const [bottomSheetRef, setBottomSheetRef] = useState(null);
11
12  const openSheet = useCallback(() => {
13    bottomSheetRef?.present();
14  }, [bottomSheetRef]);
15
16  return (
17    <BottomSheetModalProvider>
18      <View>
19        <Button title="Open Dialer" onPress={openSheet} />
20        <BottomSheetModal
21          ref={setBottomSheetRef}
22          index={0}
23          snapPoints={['50%']}
24        >
25          <DialerList
26            onDialCodeSelect={(item) => {
27              console.log(item.dial_code);
28              bottomSheetRef?.dismiss();
29            }}
30            lang="en"
31          />
32        </BottomSheetModal>
33      </View>
34    </BottomSheetModalProvider>
35  );
36};

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.