React Native Country Picker Modal

Common errors

• TypeError: (0, _reactNativeCountryPickerModal.CountryPicker) is not a function

  cause Attempting to import `CountryPicker` as a named export when it is a default export.
  fix Change your import statement from `import { CountryPicker } from 'react-native-country-picker-modal'` to `import CountryPicker from 'react-native-country-picker-modal'`.

• TS2307: Cannot find module './src/types' or its corresponding type declarations.

  cause The example code in the README shows importing types from a relative path (`./src/types`) which is internal to the library's source. Users should import types directly from the published package.
  fix Import types like `CountryCode` and `Country` directly from the package: `import type { CountryCode, Country } from 'react-native-country-picker-modal'`.

• Invariant Violation: 'main' has not been registered. This can happen if:

  cause Common React Native linking issue, especially with older versions or if the native module isn't correctly resolved (though less common with auto-linking).
  fix Ensure `react-native-country-picker-modal` is correctly linked. For React Native 0.60+, auto-linking should handle this. For older versions, manually run `react-native link react-native-country-picker-modal` or verify manual linking steps.

Warnings

• breaking The upgrade to v2.0.0, despite mentioning only new features in the release notes, is a major version bump after a significant delay. It is highly recommended to review the full changelog and thoroughly test your integration, as undocumented breaking changes or API shifts are possible.
  Fix: Consult the official GitHub repository's release notes for v2.0.0 and subsequent patches. Perform comprehensive regression testing after upgrading.
• gotcha Older versions (pre-v0.6.0) might have relied on `react-native-stage-0` for Babel presets. If you are integrating into a very old React Native project, ensure your Babel configuration is up-to-date and compatible with current React Native presets.
  Fix: Update your `babel.config.js` to use `@babel/preset-env` and `@babel/preset-react-native` or the latest recommended Babel presets for your React Native version. Generally, for modern RN projects, this isn't an issue.
• gotcha The `CountryPicker` component is a default export, while types like `CountryCode` and `Country` are named exports. Incorrect import syntax (e.g., trying to use `import { CountryPicker } from '...'`) will lead to runtime errors.
  Fix: Use `import CountryPicker from 'react-native-country-picker-modal'` for the component and `import type { CountryCode, Country } from 'react-native-country-picker-modal'` for types.

Install

• npm install react-native-country-picker-modal npm
• yarn add react-native-country-picker-modal yarn
• pnpm add react-native-country-picker-modal pnpm

Imports

• CountryPicker
  wrong:

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

  correct:

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

  The main component is a default export, not a named export.
• CountryCode
  wrong:

  import { CountryCode } from 'react-native-country-picker-modal'

  correct:

  import type { CountryCode } from 'react-native-country-picker-modal'

  Import types using 'import type' for clarity and better tree-shaking in TypeScript. These types are exported directly from the package, not a subpath like './src/types'.
• Country
  wrong:

  const Country = require('react-native-country-picker-modal').Country

  correct:

  import type { Country } from 'react-native-country-picker-modal'

  Type import for the Country object structure. Avoid CommonJS require syntax for types in modern React Native/TypeScript projects.

Quickstart

This quickstart demonstrates basic integration of the CountryPicker component, showcasing how to select a country, display its code and flag, and dynamically toggle various options like filters, flag type, and calling codes using React hooks.

import React, { useState } from 'react'
import { View, Text, StyleSheet, Switch } from 'react-native'
import CountryPicker from 'react-native-country-picker-modal'
import type { CountryCode, Country } from 'react-native-country-picker-modal'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingTop: 50
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  optionContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '80%',
    marginVertical: 5
  }
})

const Option = ({ title, value, onValueChange }) => (
  <View style={styles.optionContainer}>
    <Text>{title}</Text>
    <Switch value={value} onValueChange={onValueChange} />
  </View>
);

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('US')
  const [country, setCountry] = useState<Country | null>(null)
  const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>(false)
  const [withFlag, setWithFlag] = useState<boolean>(true)
  const [withEmoji, setWithEmoji] = useState<boolean>(true)
  const [withFilter, setWithFilter] = useState<boolean>(true)
  const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false)
  const [withCallingCode, setWithCallingCode] = useState<boolean>(false)

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

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to Country Picker!</Text>
      <Option title='With country name on button' value={withCountryNameButton} onValueChange={setWithCountryNameButton} />
      <Option title='With flag' value={withFlag} onValueChange={setWithFlag} />
      <Option title='With emoji' value={withEmoji} onValueChange={setWithEmoji} />
      <Option title='With filter' value={withFilter} onValueChange={setWithFilter} />
      <Option title='With calling code' value={withCallingCode} onValueChange={setWithCallingCode} />
      <Option title='With alpha filter code' value={withAlphaFilter} onValueChange={setWithAlphaFilter} />

      <CountryPicker
        {...{
          countryCode,
          withFilter,
          withFlag,
          withCountryNameButton,
          withAlphaFilter,
          withCallingCode,
          withEmoji,
          onSelect,
          modalProps: { visible: true }
        }}
      />
      {country && (
        <Text style={{ marginTop: 20 }}>
          Selected Country: {country.name} ({country.cca2}) {country.flag}
          {country.callingCode.length > 0 && ` +${country.callingCode[0]}`}
        </Text>
      )}
    </View>
  )
}