react-country-list-picker

A cross-platform country list / picker component and country dataset (name, dial code, ISO code, flag emoji) that works in both React (web) and React Native — with no extra config on your end.

It ships two versions of the CountryList component:

• CountryList.js — plain HTML/CSS, used automatically in web projects (CRA, Vite, Next.js, etc.)
• CountryList.native.js — built with React Native primitives (View, FlatList, ...)

React Native's Metro bundler automatically prefers *.native.js files, and web bundlers (Webpack/Vite) just resolve the plain .js file — so you import from the same path in both platforms and get the right component.

Install

npm install react-country-list-picker
# or
yarn add react-country-list-picker

React is a peer dependency (React Native is optional and only needed if you're using it in an RN project — you already have it there).

Usage (identical code on web and React Native)

import { CountryList, Country } from 'react-country-list-picker';

function MyPicker() {
  const handleSelect = (country: Country) => {
    console.log(country.name, country.dial_code, country.code);
  };

  return <CountryList onSelect={handleSelect} />;
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | onSelect | (country: Country) => void | — | Called when a country row is tapped/clicked | | data | Country[] | full built-in list | Pass a filtered/custom dataset | | searchable | boolean | true | Show/hide the built-in search box | | searchPlaceholder | string | "Search country..." | Placeholder for the search box | | textColor | string | "#222" | Quick-customise the main text/country name color | | dialTextColor | string | "#888" | Quick-customise the dial code text color | | backgroundColor | string | — | Set background color for the container and items | | searchBackgroundColor | string | — | Set search box input background color | | fontSize | number | 14 | Adjust font size for search and country name | | dialFontSize | number | 13 | Adjust font size for the dial code | | borderColor | string | "#e0e0e0" | Adjust outline border color | | searchPlaceholderTextColor| string | — | Quick-customise placeholder text color in the search box | | translation | (code: string, name: string) => string| — | A custom translation helper function to translate country names | | isRTL | boolean | — | Forces Right-to-Left layout flow (auto-detected if not set) | | containerStyle | any | — | Full style overrides for the outer wrapper | | searchStyle | any | — | Full style overrides for the search input | | rowStyle | any | — | Full style overrides for each country row | | flagStyle | any | — | Full style overrides for the flag component | | nameStyle | any | — | Full style overrides for the name label | | dialStyle | any | — | Full style overrides for the dial code label |

Dynamic Styling Examples

You can easily change the layout styling dynamically using the custom style props:

<CountryList
  onSelect={handleSelect}
  textColor="#ffffff"
  dialTextColor="#a0a0a0"
  backgroundColor="#121212"
  searchBackgroundColor="#1f1f1f"
  borderColor="#333333"
  searchPlaceholderTextColor="#555555"
  fontSize={16}
/>

Or pass complete style overrides:

<CountryList
  onSelect={handleSelect}
  containerStyle={{ borderRadius: 16 }}
  searchStyle={{ paddingVertical: 14 }}
  rowStyle={{ borderBottomWidth: 1, borderBottomColor: '#ccc' }}
/>

Internationalization (i18n) & Translation Support

Use the translation prop to map country codes (code like 'US', 'FR', etc.) to localized names. This ensures the component supports internationalization seamlessly, and both searching and display will follow the translated strings.

// Using a localization library like i18next
<CountryList
  onSelect={handleSelect}
  translation={(code, defaultName) => {
    // Translate using your localization function (e.g. t(`countries.${code}`))
    return i18n.t(`countries.${code}`, { defaultValue: defaultName });
  }}
/>

Right-to-Left (RTL) Layouts

The picker automatically detects document direction on Web (document.documentElement.dir === 'rtl') and native configurations (I18nManager.isRTL on React Native) to align the list elements and search input box to the right.

You can also force RTL direction layouts explicitly:

<CountryList
  onSelect={handleSelect}
  isRTL={true}
/>

Using just the raw data (no UI)

import { countries } from 'react-country-list-picker';

console.log(countries[0]);
// { name: "Afghanistan", dial_code: "+93", code: "AF", Icon: "🇦🇫" }

Project structure

country-list-picker/
├─ src/
│  ├─ data/countries.json      # the dataset
│  ├─ CountryList.tsx          # web version
│  ├─ CountryList.native.tsx   # React Native version
│  ├─ types.ts
│  └─ index.ts                 # public entry point
├─ dist/                       # compiled output (generated, published to npm)
├─ package.json
├─ tsconfig.json
└─ README.md

Build

npm install
npm run build   # compiles src/ -> dist/ with tsc