React Native Country Code Picker

You can read our article about this package: https://medium.com/digieggs/complete-guide-to-using-country-code-picker-in-your-react-native-projects-daedc55cc4c4

A searchable dropdown component to select a country code for your phone number input.

For Managed Workflow users using Expo

This component is not supported in the managed workflow for expo for the time being.

Getting started

npm install @digieggs/rn-country-code-picker

or

yarn add @digieggs/rn-country-code-picker

Also you need to manually install react-native-svg and react-native-localize libraries for the icons in the component

npm install react-native-svg react-native-localize

or

yarn add react-native-svg react-native-localize

For [email protected] or above

As [email protected] or above supports autolinking, so there is no need to run linking process. Read more about autolinking here.

iOS

CocoaPods on iOS needs this extra step

npx pod-install

Android

No additional step is required.

Usage

First of all, import the component.

import { CallingCodePicker } from '@digieggs/rn-country-code-picker';

Then use it like this.

const [selectedCallingCode, setSelectedCallingCode] = useState('');

return <CallingCodePicker onValueChange={callingCode => setSelectedCallingCode(callingCode)} />;

Props

• initialCountryCode
• onValueChange
• togglerContainerStyle
• togglerLabelStyle
• listContainerStyle
• searchInputStyle
• listStyle
• pickerItemLabelStyle
• pickerItemContainerStyle
• style
• isFlagVisible

Reference

Props

initialCountryCode

the ISO 3166-1 alpha-2 code (FR, US, CA) of the country that you would like to show initially. If you don't pass a value to this, the country code based on your device locale will be used.

| Type | Required | | ------ | -------- | | string | no |

onValueChange

Callback for when a country is selected.

• callingCode: the calling code of the selected country

| Type | Required | | -------- | -------- | | function | Yes |

togglerContainerStyle

Style to apply to the toggler container.

| Type | Required | | --------- | -------- | | StyleProp | No |

togglerLabelStyle

Style to apply to the picker toggler label.

| Type | Required | | --------- | -------- | | StyleProp | No |

listContainerStyle

Style to apply to the list container.

| Type | Required | | --------- | -------- | | StyleProp | No |

searchInputStyle

Style to apply to the search input.

| Type | Required | | --------- | -------- | | StyleProp | No |

listStyle

Style to apply to the FlatList component.

| Type | Required | | --------- | -------- | | StyleProp | No |

pickerItemLabelStyle

Style to apply to each of the item labels.

| Type | Required | | --------- | -------- | | StyleProp | No |

pickerItemContainerStyle

Style to apply to each of the item container.

| Type | Required | | --------- | -------- | | StyleProp | No |

style

Style to apply to container.

| Type | Required | | --------- | -------- | | StyleProp | No |

isFlagVisible

Visibility of flag component.

| Type | Required | | ------- | -------- | | boolean | No |

Credits

• https://www.countryflags.io/ (for the flags)
• https://restcountries.eu/ (fetched the info in the countries.json from this api)