Registry /
communication / react-native-country-picker-modal
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
CountryPicker
✓ import CountryPicker from 'react-native-country-picker-modal'
✗ import { CountryPicker } from 'react-native-country-picker-modal'
The main component is a default export, not a named export.
CountryCode
✓ import type { CountryCode } from 'react-native-country-picker-modal'
✗ import { 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
✓ import type { Country } from 'react-native-country-picker-modal'
✗ const Country = require('react-native-country-picker-modal').Country
Type import for the Country object structure. Avoid CommonJS require syntax for types in modern React Native/TypeScript projects.
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>
)
}
Errors
Common errors & fixes
TypeError: (0, _reactNativeCountryPickerModal.CountryPicker) is not a function
Attempting to import `CountryPicker` as a named export when it is a default export.
fixChange 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.
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.
fixImport 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:
Common React Native linking issue, especially with older versions or if the native module isn't correctly resolved (though less common with auto-linking).
fixEnsure `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.
Audit
Dependencies
reactrequiredPeer dependency for React Native applications.
react-domrequiredPeer dependency, especially for web compatibility via React Native Web.
react-nativerequiredCore dependency for all React Native components.
react-native-webrequiredPeer dependency for web support, enabling the component to run in browsers.