CountryPicker

CountryPicker is a React Native form field for choosing a country: about 250 countries with flag emojis and international dialing codes, searchable by English or native name, ISO code or + dialing code. Country names follow the device's language. It's a SelectPicker with the country list built in, so it takes the same props: a bottom sheet on phones, a dropdown on the web, multiple selection, a clear button and the iOS, Material or web design.

No images or data files to add: flags are emoji, and the list is about 11 KB, parsed on first use.

import { CountryPicker } from '@elik56a/react-native-pickers';

Loading…

Platform

Props

presentation

showDialCodedisabled

<CountryPicker label="Country" value={country} onChange={setCountry} />

Try searching deutschland, usa, +44 or JP. The value is the ISO 3166-1 alpha-2 code, such as 'IL'. getCountry turns it into the name, flag and dialing code.

Try the props

Platform

presentation

showDialCodemultipleclearable

locale

disabled

<CountryPicker
  label="Country"
  preferred={['US', 'GB', 'IL']}
  value={value}
  onChange={setValue}
  locale="en"
/>

Preferred countries and dialing codes

preferred pins countries to the top under their own header, in the order you give. showDialCode adds each country's code under its name.

Loading…

Platform

Props

presentation

showDialCodedisabled

<CountryPicker
  label="Phone country"
  preferred={['US', 'GB', 'CA']}
  showDialCode
  value={country}
  onChange={setCountry}
/>

Phone numbers

For a phone number, use PhoneField: this country list behind a flag and calling code button, with the number formatted as it's typed and stored in E.164.

Several countries

multiple turns the field into chips, as with SelectPicker. maxSelected caps the count.

Loading…

Platform

Props

presentation

showDialCodedisabled

<CountryPicker label="Countries you've visited" multiple value={visited} onChange={setVisited} />

A subset of countries

countries limits the list to the ones you ship to, and exclude drops some. Both take ISO codes, and the list is always sorted by name.

Loading…

Platform

Props

presentation

showDialCodedisabled

<CountryPicker label="Ship to" countries={EU_SHIPPING} value={country} onChange={setCountry} />

Pass countries, exclude and preferred from a constant, not a new array on every render, so the list is built once.

Country names in other languages

Names come from Intl.DisplayNames in locale, the device locale by default. Search still matches the English and native names in every language. Where the JavaScript engine has no Intl.DisplayNames, names fall back to English.

Loading…

Platform

Props

presentation

showDialCodedisabled

<CountryPicker
  label="Land"
  placeholder="Land auswählen"
  searchPlaceholder="Suchen"
  locale="de"
  value={country}
  onChange={setCountry}
/>

Utilities

The country data is exported for your own UIs, such as a flag next to a username or a dialing code in a form.

Export	Description
getCountry(code)	{ code, name, nativeName?, dialCode, flag, keywords } for an ISO code in any case, or undefined
getAllCountries()	Every Country, sorted by code
getCountryFlag(code)	The flag emoji for an ISO code: 'jp' → 🇯🇵

getCountry('il'); // { code: 'IL', name: 'Israel', nativeName: 'יִשְׂרָאֵל', dialCode: '+972', flag: '🇮🇱', keywords: [] }

Props

Every SelectPicker prop works, apart from the server search ones (options, loadOptions, onSearchChange, loading and the rest): the list is built in. value is a CountryCode, or CountryCode[] with multiple.

Prop	Type	Default	Description
countries	CountryCode[]	all	Only these countries.
exclude	CountryCode[]	—	Leave these out.
preferred	CountryCode[]	—	Shown first, in this order, under their own header.
preferredLabel	string	'Suggested'	Header above preferred.
allCountriesLabel	string	'All countries'	Header above the rest when preferred is set.
showDialCode	boolean	false	Show each country's dialing code under its name.
locale	string	device locale	Language of the country names.
placeholder	string	'Select a country'	Shown while nothing is selected.
searchPlaceholder	string	'Search countries'	Search field placeholder.
sheet	SheetChromeProps	sheetProps.height: 0.8	Sheet options. The sheet opens at 80% of the screen so it doesn't jump as search narrows the list.

Types

type CountryCode = 'AD' | 'AE' | 'AF' | … ; // ISO 3166-1 alpha-2

interface Country {
  code: CountryCode;
  name: string; // English
  nativeName?: string; // in the country's own language, when different
  dialCode: string; // '+972'
  flag: string; // '🇮🇱'
  keywords: string[]; // aliases ('USA') and other dialing codes
}

Country data comes from countries-list (MIT).