Introduction

Hello everyone and welcome to this new article, where we are going to explore how we can make a React Native Country Picker.

We will have a fully functional Country Picker with country flag image, phone code, alphabet filter, country search and more.

This component can be used in plenty of ways, as an example in a sign up form, where the user has to add his country and phone code, or within a social media profile fill up, where the user adds his country of origin.

For this example, we will have a simple select country button and a title text displaying the selected country.
Once the select country button is clicker, the full React Native Country Picker will pop up with it’s props and functions.

The final result.

React Native Country Picker result

Without further due, let’s get started.

React Native Country Picker Setup

If you did not already setup a new react native project, it’s about time you do.

Create a new react native project either with expo or react native cli.

For this example I will create an expo project.

expo init new-project

Next, we will add a new picker library.

yarn add react-native-country-picker-modal

And this should be it.

React Native Country Picker Basic Usage

First we import the country picker component.

import CountryPicker from 'react-native-country-picker-modal'

<View style={styles.container}>
  <CountryPicker />
</View>

And we can use it directly within our app views. It should work properly without anything special.
But we will need add more props to it.
Now the component displays a text button saying select country.

Country selection

In order to get the selected country from the user, we will use a simple state variable using useState hook, and point it to the onSelect prop of the country picker component.

import React, { useState} from 'react';

export default function App() {
  const [country, setCountry] = useState(null)

  return (
    <View style={styles.container}>
      <CountryPicker 
         onSelect={(country) => setCountry(country)}
      />
    </View>
  );
}
Country Phone and Filters

This Country Picker component allows us to add extra details to the Picker view, including country phone code, filter, searchable view and much more,

All we need is tdd it.

<CountryPicker 
    withFilter
    withFlag
    withCountryNameButton
    withAlphaFilter
    withCallingCode
    withEmoji
    onSelect={(country) => setCountry(country)}
  />

Full Props lis

countryCode: CountryCode
region?:Region
subregion?: Subregion
countryCodes?: CountryCode
theme?: Theme
translation?: TranslationLanguageCode
modalProps?: ModalProps
filterProps?: CountryFilterProps
flatListProps?: FlatListProps
withAlphaFilter?: boolean
withCallingCode?: boolean
withCurrency?: boolean
withEmoji?: boolean
withCountryNameButton?: boolean
withCurrencyButton?: boolean
withCallingCodeButton?: boolean
withFlagButton?: boolean
withCloseButton?: boolean
withFilter?: boolean
withFlag?: boolean
withModal?: boolean
visible?: boolean
containerButtonStyle?: StyleProp<ViewStyle>
renderFlagButton?(props: (FlagButton['props'])): ReactNode (FlagButton props)
renderCountryFilter?(props: CountryFilter['props']): ReactNode (CountryFilter props is TextInputProps)
onSelect(country: Country): void (Country)
onOpen(): void
onClose(): void
closeButtonImage?: ImageSourcePropType
closeButtonStyle?: StyleProp
closeButtonImageStyle?: StyleProp
disableNativeModal?: boolean (you have to wrap your all app with CountryModalProvider)
preferredCountries: CountryCode preferred countries they appear first (withAlphaFilter must be false)

Result

React Native Country Picker result

Conclusion

That was it for this article, we have created a nice React Native Country Picker with phone code, filters and more.
I hope you enjoyed reading this article, and found it as informative as you have expected.

Stay safe and happy coding.