{"id":15197,"library":"react-native-country-picker-modal","title":"React Native Country Picker Modal","description":"react-native-country-picker-modal is a versatile React Native component that provides a customizable modal for selecting countries. It supports both iOS, Android, and Web platforms, making it suitable for cross-platform applications. The current stable version is 2.0.0, which recently added support for preferred countries. While the release cadence has been somewhat irregular, the project remains active, with the v2.0.0 release following a significant period since the previous major update. Key features include displaying country flags (as emojis or flat images), showing calling codes, and offering filtering capabilities. The library also ships with comprehensive TypeScript definitions, ensuring a smooth developer experience in typed environments, and supports various customization options for its appearance and behavior.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/xcarpentier/react-native-country-picker-modal","tags":["javascript","react-native","components","country-picker","country","flag","typescript"],"install":[{"cmd":"npm install react-native-country-picker-modal","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-country-picker-modal","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-country-picker-modal","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native applications.","package":"react","optional":false},{"reason":"Peer dependency, especially for web compatibility via React Native Web.","package":"react-dom","optional":false},{"reason":"Core dependency for all React Native components.","package":"react-native","optional":false},{"reason":"Peer dependency for web support, enabling the component to run in browsers.","package":"react-native-web","optional":false}],"imports":[{"note":"The main component is a default export, not a named export.","wrong":"import { CountryPicker } from 'react-native-country-picker-modal'","symbol":"CountryPicker","correct":"import CountryPicker from 'react-native-country-picker-modal'"},{"note":"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'.","wrong":"import { CountryCode } from 'react-native-country-picker-modal'","symbol":"CountryCode","correct":"import type { CountryCode } from 'react-native-country-picker-modal'"},{"note":"Type import for the Country object structure. Avoid CommonJS require syntax for types in modern React Native/TypeScript projects.","wrong":"const Country = require('react-native-country-picker-modal').Country","symbol":"Country","correct":"import type { Country } from 'react-native-country-picker-modal'"}],"quickstart":{"code":"import React, { useState } from 'react'\nimport { View, Text, StyleSheet, Switch } from 'react-native'\nimport CountryPicker from 'react-native-country-picker-modal'\nimport type { CountryCode, Country } from 'react-native-country-picker-modal'\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n    paddingTop: 50\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10\n  },\n  optionContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '80%',\n    marginVertical: 5\n  }\n})\n\nconst Option = ({ title, value, onValueChange }) => (\n  <View style={styles.optionContainer}>\n    <Text>{title}</Text>\n    <Switch value={value} onValueChange={onValueChange} />\n  </View>\n);\n\nexport default function App() {\n  const [countryCode, setCountryCode] = useState<CountryCode>('US')\n  const [country, setCountry] = useState<Country | null>(null)\n  const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>(false)\n  const [withFlag, setWithFlag] = useState<boolean>(true)\n  const [withEmoji, setWithEmoji] = useState<boolean>(true)\n  const [withFilter, setWithFilter] = useState<boolean>(true)\n  const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false)\n  const [withCallingCode, setWithCallingCode] = useState<boolean>(false)\n\n  const onSelect = (selectedCountry: Country) => {\n    setCountryCode(selectedCountry.cca2)\n    setCountry(selectedCountry)\n  }\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.welcome}>Welcome to Country Picker!</Text>\n      <Option title='With country name on button' value={withCountryNameButton} onValueChange={setWithCountryNameButton} />\n      <Option title='With flag' value={withFlag} onValueChange={setWithFlag} />\n      <Option title='With emoji' value={withEmoji} onValueChange={setWithEmoji} />\n      <Option title='With filter' value={withFilter} onValueChange={setWithFilter} />\n      <Option title='With calling code' value={withCallingCode} onValueChange={setWithCallingCode} />\n      <Option title='With alpha filter code' value={withAlphaFilter} onValueChange={setWithAlphaFilter} />\n\n      <CountryPicker\n        {...{\n          countryCode,\n          withFilter,\n          withFlag,\n          withCountryNameButton,\n          withAlphaFilter,\n          withCallingCode,\n          withEmoji,\n          onSelect,\n          modalProps: { visible: true }\n        }}\n      />\n      {country && (\n        <Text style={{ marginTop: 20 }}>\n          Selected Country: {country.name} ({country.cca2}) {country.flag}\n          {country.callingCode.length > 0 && ` +${country.callingCode[0]}`}\n        </Text>\n      )}\n    </View>\n  )\n}","lang":"typescript","description":"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."},"warnings":[{"fix":"Consult the official GitHub repository's release notes for v2.0.0 and subsequent patches. Perform comprehensive regression testing after upgrading.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<0.6.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import { CountryPicker } from 'react-native-country-picker-modal'` to `import CountryPicker from 'react-native-country-picker-modal'`.","cause":"Attempting to import `CountryPicker` as a named export when it is a default export.","error":"TypeError: (0, _reactNativeCountryPickerModal.CountryPicker) is not a function"},{"fix":"Import types like `CountryCode` and `Country` directly from the package: `import type { CountryCode, Country } from 'react-native-country-picker-modal'`.","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.","error":"TS2307: Cannot find module './src/types' or its corresponding type declarations."},{"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.","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).","error":"Invariant Violation: 'main' has not been registered. This can happen if:"}],"ecosystem":"npm"}