react-native-country-picker-modal

To use the CountryPicker component, import it from react-native-country-picker-modal. You typically manage the selected countryCode and the full country object in your component state. Use the onSelect callback to update your state when a user picks a country.

import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import CountryPicker from 'react-native-country-picker-modal'
import { CountryCode, Country } from './src/types'

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('FR')
  const [country, setCountry] = useState<Country>(null)

  const onSelect = (country: Country) => {
    setCountryCode(country.cca2)
    setCountry(country)
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CountryPicker
        countryCode={countryCode}
        withFilter
        withFlag
        withCountryNameButton
        withAlphaFilter
        withCallingCode
        withEmoji
        onSelect={onSelect}
        visible
      />
      {country !== null && (
        <Text>{JSON.stringify(country, null, 2)}</Text>
      )}
    </View>
  )
}

The react-native-country-picker-modal library provides a theming system to customize the appearance of the picker. You can use the predefined DEFAULT_THEME or DARK_THEME, or provide a custom theme object that implements the Theme type. The Theme type is a partial implementation of the default theme properties.

Available theme properties include:

• primaryColor: The main color of the picker components.
• primaryColorVariant: A variant color for primary elements.
• backgroundColor: The background color of the modal/list.
• onBackgroundTextColor: The color of text displayed on the background.
• fontSize: The font size for text elements.
• fontFamily: The font family (defaults to System on iOS, Roboto on Android, and Arial on Web).
• filterPlaceholderTextColor: The color of the placeholder text in the search filter.
• activeOpacity: The opacity level when an item is pressed.
• itemHeight: The height of list items.
• flagSize: The size of the flags in the list (defaults to 20 on Android, 30 otherwise).
• flagSizeButton: The size of the flag in the selection button (defaults to 20 on Android, 30 otherwise).

import { Theme } from 'react-native-country-picker-modal';

const myCustomTheme: Theme = {
  primaryColor: '#ff0000',
  backgroundColor: '#f0f0f0',
  fontSize: 18
};

The CountryPicker component accepts several props to customize its behavior and appearance:

Selection & Data

• countryCode: The currently selected CountryCode.
• onSelect: Callback function (country: Country) => void triggered when a country is selected.
• preferredCountries: An array of CountryCode that appear first in the list (requires withAlphaFilter to be false).
• region?: Filter by Region.
• subregion?: Filter by Subregion.
• countryCodes?: An array of CountryCode to limit the list.

UI Customization

• visible: Boolean to control visibility.
• withFlag: Show flags in the list.
• withEmoji: Show emoji flags.
• withFilter: Enable the search filter.
• withAlphaFilter: Enable alphabetical filtering.
• withCallingCode: Show calling codes.
• withCurrency: Show currency information.
• withCountryNameButton: Show the country name on the trigger button.
• withCurrencyButton: Show the currency on the trigger button.
• withCallingCodeButton: Show the calling code on the trigger button.
• withFlagButton: Show the flag on the trigger button.
• withCloseButton: Show a close button in the modal.
• theme: Apply a specific Theme (e.g., DARK_THEME).
• translation: Set the TranslationLanguageCode.

Component Overrides & Styling

• renderFlagButton: Custom renderer for the flag button.
• renderCountryFilter: Custom renderer for the country filter (accepts TextInputProps).
• containerButtonStyle: StyleProp<ViewStyle> for the button container.
• closeButtonStyle: StyleProp<ViewStyle> for the close button.
• closeButtonImageStyle: StyleProp<ImageStyle> for the close button image.
• closeButtonImage: ImageSourcePropType for the close button icon.
• modalProps: Props passed to the underlying React Native Modal.
• filterProps: Props passed to the country filter (CountryFilterProps).
• flatListProps: Props passed to the underlying FlatList (FlatListProps<Country>).

Lifecycle & Native

• onOpen: Callback when the modal opens.
• onClose: Callback when the modal closes.
• disableNativeModal: Boolean. If true, you must wrap your entire app with CountryModalProvider.