React Native Country Select

🌍 React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.

Features

• 📱 Cross-Platform – Works seamlessly on iOS, Android and Web;
• 🧩 Flexible Integration – Supports both React Native CLI & Expo;
• 🎨 Modern UI - Custom component with sleek design;
• 👨‍💻 Component Versatility - Works with functional & class components;
• 🈶 internationalization - Supports 32 languages;
• 🧪 Test Ready – Smooth testing integration;
• ♿ Accessibility – Accessibility standards to screen readers.

Try it out

• Demo

Installation

npm install react-native-country-select
# or
yarn add react-native-country-select

Additional config to WEB

• Using React Native CLI:

Create a react-native.config.js file at the root of your react-native project with:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [
    './node_modules/react-native-country-select/lib/assets/fonts',
  ],
};

Then link the font to your native projects with:

npx react-native-asset

• Using Expo:

• Install expo-fonts: npx expo install expo-font;

• Initialize the expo-font:

  import { useFonts } from 'expo-font';

  ...

  useFonts({
    'TwemojiMozilla': require('./node_modules/react-native-country-select/lib/assets/fonts/TwemojiMozilla.woff2'),
  });

  ...

Observation: you need to recompile your project after adding new fonts.

Basic Usage

• Class Component

import React, {Component} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import CountrySelect from 'react-native-country-select';

export default class App extends Component {
  countryRef = null;

  constructor(props) {
    super(props);
    this.state = {
      showPicker: false,
      country: null,
    };
  }

  handleCountrySelect = country => {
    this.setState({country});
  };

  render() {
    return (
      <View style={{flex: 1}}>
        <TouchableOpacity onPress={() => this.setState({showPicker: true})}>
          <Text>Select Country</Text>
        </TouchableOpacity>
        <Text>
          Country:{' '}
          {`${this.state.selectedCountry?.name?.common} (${this.state.selectedCountry?.cca2})`}
        </Text>

        <CountrySelect
          visible={this.state.showPicker}
          onClose={() => this.setState({showPicker: false})}
          onSelect={this.handleCountrySelect}
        />
      </View>
    );
  }
}

• Function Component

import React, {useState} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';

import CountrySelect from 'react-native-country-select';

export default function App() {
  const [showPicker, setShowPicker] = useState(false);
  const [selectedCountry, setSelectedCountry] = useState(null);

  const handleCountrySelect = country => {
    setSelectedCountry(country);
  };

  return (
    <View
      style={{
        flex: 1,
      }}>
      <TouchableOpacity onPress={() => setShowPicker(true)}>
        <Text>Select Country</Text>
      </TouchableOpacity>
      <Text>
        Country: {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}
      </Text>

      <CountrySelect
        visible={showPicker}
        onClose={() => setShowPicker(false)}
        onSelect={handleCountrySelect}
      />
    </View>
  );
}

• Typescript

import React, {useState} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';

import CountrySelect, {ICountry} from 'react-native-country-select';

export default function App() {
  const [showPicker, setShowPicker] = useState<boolean>(false);
  const [selectedCountry, setSelectedCountry] = useState<ICountry | null>(null);

  const handleCountrySelect = (country: ICountry) => {
    setSelectedCountry(country);
  };

  return (
    <View
      style={{
        flex: 1,
      }}>
      <TouchableOpacity onPress={() => setShowPicker(true)}>
        <Text>Select Country</Text>
      </TouchableOpacity>
      <Text>
        Country: {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}
      </Text>

      <CountrySelect
        visible={showPicker}
        onClose={() => setShowPicker(false)}
        onSelect={handleCountrySelect}
      />
    </View>
  );
}

• Multi Select Country

import React, {useState} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';

import CountrySelect, {ICountry} from 'react-native-country-select';

export default function App() {
  const [showPicker, setShowPicker] = useState<boolean>(false);
  const [selectedCountries, setSelectedCountries] = useState<ICountry[]>([]);

  const handleCountrySelect = (countries: ICountry[]) => {
    setSelectedCountries(countries);
  };

  return (
    <View
      style={{
        flex: 1,
      }}>
      <TouchableOpacity onPress={() => setShowPicker(true)}>
        <Text>Select Countries</Text>
      </TouchableOpacity>
      <Text>Countries: {selectedCountries.length}</Text>

      <CountrySelect
        visible={showPicker}
        isMultiSelect
        selectedCountries={selectedCountries}
        onSelect={handleCountrySelect}
        onClose={() => setShowPicker(false)}
      />
    </View>
  );
}

Modal Styles (modalStyles)

CountrySelect Props (countrySelectProps)

Supported Languages

The language prop supports the following values:

Testing

When utilizing this package, you may need to target the CountrySelect component in your automated tests. To facilitate this, we provide a testID props for the CountrySelect component. The testID can be integrated with popular testing libraries such as @testing-library/react-native or Maestro. This enables you to efficiently locate and interact with CountrySelect elements within your tests, ensuring a robust and reliable testing experience.

const countrySelectModalContainer = getByTestId('countrySelectContainer');
const countrySelectModalContent = getByTestId('countrySelectContent');
const countrySelectBackdrop = getByTestId('countrySelectBackdrop');
const countrySelectList = getByTestId('countrySelectList');
const countrySelectSearchInput = getByTestId('countrySelectSearchInput');
const countrySelectItem = getByTestId('countrySelectItem');
const countrySelectCloseButton = getByTestId('countrySelectCloseButton');

Accessibility

Ensure your app is inclusive and usable by everyone by leveraging built-in React Native accessibility features. The accessibility props are covered and customizable by this package.

Custom Accessibility Props Available

• accessibilityLabelBackdrop: Accessibility label for the backdrop;
• accessibilityHintBackdrop: Accessibility hint for the backdrop;
• accessibilityLabelCloseButton: Accessibility label for the close button;
• accessibilityHintCloseButton: Accessibility hint for the close button;
• accessibilityLabelSearchInput: Accessibility label for the search input;
• accessibilityHintSearchInput: Accessibility hint for the search input;
• accessibilityLabelCountriesList: Accessibility label for the countries list;
• accessibilityHintCountriesList: Accessibility hint for the countries list;
• accessibilityLabelCountryItem: Accessibility label for individual country items;
• accessibilityHintCountryItem: Accessibility hint for individual country;
• accessibilityLabelAlphabetFilter: Accessibility label for alphabet filter list;
• accessibilityHintAlphabetFilter: Accessibility hint for alphabet filter list;
• accessibilityLabelAlphabetLetter: Accessibility label for individual alphabet filter letter;
• accessibilityHintAlphabetLetter: Accessibility hint for individual alphabet filter letter.

Contributing

Thank you for considering contributing to react-native-country-select!

• Fork or clone this repository

  $ git clone https://github.com/AstrOOnauta/react-native-country-select.git

• Repair, Update and Enjoy 🛠️🚧⚙️

• Create a new PR to this repository

Credits

@mledoze for the countries data

License

ISC