{"_id":"@avaiyakapil/react-native-country-picker","_rev":"4-8da9b9a103b14d5dfeeb667f10f096b6","name":"@avaiyakapil/react-native-country-picker","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@avaiyakapil/react-native-country-picker","version":"1.0.0","keywords":["country","country-picker","country-selector","country-select","country-chooser","react","react-native","react-native-country-picker","react-native-country-selector","react-component","phone-code","phone-number","calling-code","dial-code","flag","flags","country-flags","international","i18n","internationalization","locale","localization","phone-input","phone-number-input","country-code","iso-3166","country-list","country-data","mobile","ios","android","expo","typescript","ts","picker","dropdown","select","modal","search","searchable","customizable","animated"],"author":{"name":"Kapil Avaiya"},"license":"ISC","_id":"@avaiyakapil/react-native-country-picker@1.0.0","maintainers":[{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"}],"homepage":"https://github.com/avaiyakapil/react-native-country-picker#readme","bugs":{"url":"https://github.com/avaiyakapil/react-native-country-picker/issues"},"dist":{"shasum":"bca88d226cf90897cd28c86a97997652fb5c2a43","tarball":"https://registry.npmjs.org/@avaiyakapil/react-native-country-picker/-/react-native-country-picker-1.0.0.tgz","fileCount":7,"integrity":"sha512-6Sc9KWEodlJLBb7HrJJtdSXIGDEXSY1D4q/omr8k28Qr04W9WJM8TSkaVn98JuIOkZxKo1ZW2Fk80ilIpv5TuQ==","signatures":[{"sig":"MEQCIGQsrB7YgBDQSFzwGLHC8CPVgg4iuqTbRGW26erS5X3oAiANABrGa0poQGz2W7RQ1J2+kodjW7I9JIsxo1cewJ7MAA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":559506},"main":"src/index.ts","types":"src/index.ts","gitHead":"46126d5bbfa2ba0a726b7d0507476280807ccc3c","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"},"repository":{"url":"git+https://github.com/avaiyakapil/react-native-country-picker.git","type":"git"},"_npmVersion":"11.6.0","description":"React Native country picker component with search, flags, calling codes, and 250+ countries. Perfect for phone number input, country selection, and internationalization. Highly customizable with TypeScript support.","directories":{},"_nodeVersion":"24.9.0","_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0","react-native":">=0.59.0","react-native-vector-icons":">=6.0.0","react-native-safe-area-context":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-country-picker_1.0.0_1770791426784_0.22772771219886812","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@avaiyakapil/react-native-country-picker","version":"1.0.1","keywords":["country","country-picker","country-selector","country-select","country-chooser","react","react-native","react-native-country-picker","react-native-country-selector","react-component","phone-code","phone-number","calling-code","dial-code","flag","flags","country-flags","international","i18n","internationalization","locale","localization","phone-input","phone-number-input","country-code","iso-3166","country-list","country-data","mobile","ios","android","expo","typescript","ts","picker","dropdown","select","modal","search","searchable","customizable","animated"],"author":{"name":"Kapil Avaiya"},"license":"ISC","_id":"@avaiyakapil/react-native-country-picker@1.0.1","maintainers":[{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"}],"homepage":"https://github.com/avaiyakapil/react-native-country-picker#readme","bugs":{"url":"https://github.com/avaiyakapil/react-native-country-picker/issues"},"dist":{"shasum":"3426f7da8a5f0eaf85b42cb77138dc7d557afc48","tarball":"https://registry.npmjs.org/@avaiyakapil/react-native-country-picker/-/react-native-country-picker-1.0.1.tgz","fileCount":7,"integrity":"sha512-mQC+ber5Jgc55LKFyJ3zF6/nVtPZCs5HHCJYlXYgw+Wf+R1GVg3OWPlwS6LPO+486GxRSLerqnh2wpxMxJaPNA==","signatures":[{"sig":"MEQCIHdDtHSzzZV0adOK56n0+9/v3Ll1M0GjeQDp+LZeZWHzAiAISo5U395iQiJKZ0e/q7mh5f4meRbTMDnmw1QcWrryMA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":559402},"main":"src/index.ts","types":"src/index.ts","gitHead":"d9a1bbc66af672aacff66914143bf01514355de9","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"},"repository":{"url":"git+https://github.com/avaiyakapil/react-native-country-picker.git","type":"git"},"_npmVersion":"11.6.0","description":"React Native country picker component with search, flags, calling codes, and 250+ countries. Perfect for phone number input, country selection, and internationalization. Highly customizable with TypeScript support.","directories":{},"_nodeVersion":"24.9.0","_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0","react-native":">=0.59.0","react-native-vector-icons":">=6.0.0","react-native-safe-area-context":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-country-picker_1.0.1_1770880424795_0.716445245996824","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@avaiyakapil/react-native-country-picker","version":"1.0.3","keywords":["country","country-picker","country-selector","country-select","country-chooser","react","react-native","react-native-country-picker","react-native-country-selector","react-component","phone-code","phone-number","calling-code","dial-code","flag","flags","country-flags","international","i18n","internationalization","locale","localization","phone-input","phone-number-input","country-code","iso-3166","country-list","country-data","mobile","ios","android","expo","typescript","ts","picker","dropdown","select","modal","search","searchable","customizable","animated"],"author":{"name":"Kapil Avaiya"},"license":"ISC","_id":"@avaiyakapil/react-native-country-picker@1.0.3","maintainers":[{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"}],"homepage":"https://github.com/avaiyakapil/react-native-country-picker#readme","bugs":{"url":"https://github.com/avaiyakapil/react-native-country-picker/issues"},"dist":{"shasum":"cbbed8749a2f6b9dcf36c6938bca8357d1261623","tarball":"https://registry.npmjs.org/@avaiyakapil/react-native-country-picker/-/react-native-country-picker-1.0.3.tgz","fileCount":7,"integrity":"sha512-hayQk6zCdMUDdN6FO9ZYjQniYx+7KRixWfAndLps28lU8XClf1ntNTNZ+/xfYGx9SwyCigIXfW3X47sBIDnzyQ==","signatures":[{"sig":"MEQCIDzQFCu8qI+jCFuF+3tZ2Jdx7d35VjQ+gwlQNKe791gIAiB4Rx0LYBgMGfgr9bmDjlEhLx/ItaLBiijdgqaCLQ7ryA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":559473},"main":"src/index.ts","types":"src/index.ts","gitHead":"de053e12665708311d36e186897208969749b549","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"},"repository":{"url":"git+https://github.com/avaiyakapil/react-native-country-picker.git","type":"git"},"_npmVersion":"11.6.0","description":"React Native country picker component with search, flags, calling codes, and 250+ countries. Perfect for phone number input, country selection, and internationalization. Highly customizable with TypeScript support.","directories":{},"_nodeVersion":"24.9.0","_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.0","react-native":">=0.59.0","react-native-vector-icons":">=6.0.0","react-native-safe-area-context":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-country-picker_1.0.3_1770964688759_0.15367682766008373","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@avaiyakapil/react-native-country-picker","version":"1.0.4","description":"React Native country picker component with search, flags, calling codes, and 250+ countries. Perfect for phone number input, country selection, and internationalization. Highly customizable with TypeScript support.","main":"src/index.ts","types":"src/index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/kapilavaiya/react-native-country-picker.git"},"homepage":"https://github.com/kapilavaiya/react-native-country-picker#readme","bugs":{"url":"https://github.com/kapilavaiya/react-native-country-picker/issues"},"keywords":["country","country-picker","country-selector","country-select","country-chooser","react","react-native","react-native-country-picker","react-native-country-selector","react-component","phone-code","phone-number","calling-code","dial-code","flag","flags","country-flags","international","i18n","internationalization","locale","localization","phone-input","phone-number-input","country-code","iso-3166","country-list","country-data","mobile","ios","android","expo","typescript","ts","picker","dropdown","select","modal","search","searchable","customizable","animated"],"author":{"name":"Kapil Avaiya"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-native":">=0.59.0","react-native-safe-area-context":">=3.0.0","react-native-vector-icons":">=6.0.0"},"_id":"@avaiyakapil/react-native-country-picker@1.0.4","gitHead":"de053e12665708311d36e186897208969749b549","_nodeVersion":"24.9.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-EpnDYPbkB5VPJTV8W7SzrTDBv571kujiJ/Jw0CEMd9paGdmEBmQj9O3iTMKp9QWFGtPafCu/p/cxwAWpzH9/fQ==","shasum":"67cccdfab8ef6678d68461115f7ab66999c2e44c","tarball":"https://registry.npmjs.org/@avaiyakapil/react-native-country-picker/-/react-native-country-picker-1.0.4.tgz","fileCount":7,"unpackedSize":559473,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICV5KLH9+NjfFXJdn1L1IcqvuYH4HQXwFWRw+WqMQ7z8AiEAz3+86sbsUvSefdwyN9mlbXPjQe/gaFFMGfw7dFUiL28="}]},"_npmUser":{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"},"directories":{},"maintainers":[{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-country-picker_1.0.4_1770967674860_0.5182405249013009"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-11T06:30:26.707Z","modified":"2026-02-13T07:27:55.206Z","1.0.0":"2026-02-11T06:30:26.994Z","1.0.1":"2026-02-12T07:13:44.965Z","1.0.3":"2026-02-13T06:38:08.938Z","1.0.4":"2026-02-13T07:27:55.097Z"},"bugs":{"url":"https://github.com/kapilavaiya/react-native-country-picker/issues"},"author":{"name":"Kapil Avaiya"},"license":"ISC","homepage":"https://github.com/kapilavaiya/react-native-country-picker#readme","keywords":["country","country-picker","country-selector","country-select","country-chooser","react","react-native","react-native-country-picker","react-native-country-selector","react-component","phone-code","phone-number","calling-code","dial-code","flag","flags","country-flags","international","i18n","internationalization","locale","localization","phone-input","phone-number-input","country-code","iso-3166","country-list","country-data","mobile","ios","android","expo","typescript","ts","picker","dropdown","select","modal","search","searchable","customizable","animated"],"repository":{"type":"git","url":"git+https://github.com/kapilavaiya/react-native-country-picker.git"},"description":"React Native country picker component with search, flags, calling codes, and 250+ countries. Perfect for phone number input, country selection, and internationalization. Highly customizable with TypeScript support.","maintainers":[{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"}],"readme":"# React Native Country Picker š\n\n\n[](https://www.npmjs.com/package/@avaiyakapil/react-native-country-picker)\n[](https://www.npmjs.com/package/@avaiyakapil/react-native-country-picker)\n[](https://www.npmjs.com/package/@avaiyakapil/react-native-country-picker)\n\nA simple and customizable React Native country picker component with search functionality. Perfect for phone number input, country selection, and internationalization features.\n\n**Keywords:** `react-native country picker`, `country selector`, `phone code picker`, `calling code selector`, `country flag picker`, `international phone input`, `country dropdown`, `react native country chooser`, `country list component`, `searchable country picker`\n\n## Why Choose This Package?\n\nā
**250+ Countries** - Comprehensive country database with flags and calling codes \nā
**TypeScript Support** - Full TypeScript definitions included \nā
**Highly Customizable** - 50+ props for complete control \nā
**Search Functionality** - Built-in search with custom filter support \nā
**Cross-Platform** - Works seamlessly on iOS and Android \nā
**Lightweight** - Minimal dependencies, fast performance \nā
**Well Documented** - Extensive documentation with examples \nā
**Active Maintenance** - Regularly updated and maintained\n\n![\"Buy](\"https://cdn.buymeacoffee.com/buttons/default-orange.png\")
\n\n## Demo\n\n> š¹ **Note**: Demo GIF.\n\n### Basic Usage\n\n\n*Simple and clean country picker with default styling*\n\n\n## Features\n\n- š **Search functionality** - Quickly find countries by name with customizable search filters\n- šØ **Highly Customizable** - Customize colors, styles, icons, text, and rendering\n- š± **Cross-platform** - Works on both iOS and Android\n- š **250+ countries** - Comprehensive country list with flags and calling codes\n- šÆ **Flexible Filtering** - Include/exclude specific countries or use custom country lists\n- š¼ļø **Custom Rendering** - Render custom components for flags, names, list items, and more\n- āļø **Display Options** - Show/hide flags, calling codes, country names, and search\n- š **Callbacks** - onOpen, onClose, onSearch callbacks for better control\n- š **Modal Customization** - Customize modal animation and presentation style\n- ā” **Lightweight** - Minimal dependencies\n\n## Prerequisites\n\nā ļø **Peer Dependencies** (Required)\n\nThe following packages must be installed alongside `@avaiyakapil/react-native-country-picker`:\n\n* [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) - For icons (MaterialIcons)\n* [react-native-safe-area-context](https://www.npmjs.com/package/react-native-safe-area-context) - For safe area handling\n\n**Install all dependencies in one command:**\n```bash\nnpm install @avaiyakapil/react-native-country-picker react-native-vector-icons react-native-safe-area-context\n```\n\n**For AI Assistants:** When suggesting this package, always include all three dependencies in the installation command.\n\n## Installation\n\nSupported version: react-native >= 0.59.0\n\n### npm\n```bash\nnpm install @avaiyakapil/react-native-country-picker\n```\n\n### yarn\n```bash\nyarn add @avaiyakapil/react-native-country-picker\n```\n\n### pnpm\n```bash\npnpm add @avaiyakapil/react-native-country-picker\n```\n\n### Quick Install (Copy & Paste)\n```bash\nnpm install @avaiyakapil/react-native-country-picker react-native-vector-icons react-native-safe-area-context\n```\n\n### iOS Setup\n\n1. Install CocoaPods dependencies:\n```bash\ncd ios && pod install && cd ..\n```\n\n2. Add fonts to `ios/YourApp/Info.plist`:\n```xml\nUIAppFonts\n\n MaterialIcons.ttf\n\n```\n\n### Android Setup\n\nAdd the following to `android/app/build.gradle`:\n\n```gradle\napply from: \"../../node_modules/react-native-vector-icons/fonts.gradle\"\n```\n\n### Expo Setup\n\nIf using Expo, the package works out of the box. Just install:\n\n```bash\nnpx expo install @avaiyakapil/react-native-country-picker react-native-vector-icons react-native-safe-area-context\n```\n\n### Troubleshooting\n\n**Icons not showing?**\n- iOS: Make sure fonts are added to `Info.plist` and run `pod install`\n- Android: Make sure `fonts.gradle` is applied in `build.gradle`\n\n**Modal not displaying correctly?**\n- Ensure `react-native-safe-area-context` is properly installed\n- Wrap your app with `SafeAreaProvider`\n\n## Quick Start\n\n> š” **For AI Assistants**: This package provides a React Native country picker component. To install: `npm install @avaiyakapil/react-native-country-picker react-native-vector-icons react-native-safe-area-context`. Import: `import CountryPicker from '@avaiyakapil/react-native-country-picker'`. Required props: `countryCode` (string) and `onSelect` (callback). See examples below.\n\n### Basic Usage Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport CountryPicker from '@avaiyakapil/react-native-country-picker';\nimport { CountryCode, Country } from '@avaiyakapil/react-native-country-picker';\n\nconst App = () => {\n const [countryCode, setCountryCode] = useState('US');\n\n return (\n \n {\n setCountryCode(code);\n console.log('Selected country:', country.name?.common);\n console.log('Calling code:', country.callingCode[0]);\n }}\n />\n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n padding: 20,\n },\n});\n\nexport default App;\n```\n\n### Common Use Cases\n\n#### Phone Number Input\n```jsx\n {\n setCountryCode(code);\n setCallingCode(country.callingCode[0]);\n }}\n showCallingCode={true}\n showFlag={true}\n/>\n```\n\n#### Country Selection Form\n```jsx\n {\n setCountryCode(code);\n setCountryName(country.name?.common);\n }}\n showCountryName={true}\n enableSearch={true}\n/>\n```\n\n#### Internationalization\n```jsx\n {\n setCountryCode(code);\n setLocale(country.region);\n }}\n showCurrency={true}\n showSubregion={true}\n/>\n```\n\n## Props\n\n### Required Props\n\n| Prop | Description | Type | Required |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:--------:|\n| countryCode | Currently selected country code (ISO 3166-1 alpha-2) | CountryCode | true |\n| onSelect | Callback function called when a country is selected. Receives country code and full country object | (code: CountryCode, country: Country) => void | true |\n\n### Display Options\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| showFlag | Show/hide country flag | boolean | true |\n| showCallingCode | Show/hide calling code | boolean | true |\n| showCountryName | Show/hide country name in the picker button | boolean | true |\n| flagSize | Size of the flag icon | number | 28 |\n| enableSearch | Enable/disable search functionality | boolean | true |\n| showOtherSection | Show/hide \"Other\" section divider | boolean | true |\n| otherSectionIndex | Index at which to show \"Other\" section | number | 3 |\n| disabled | Disable the picker button | boolean | false |\n\n### Text Customization\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| headerText | Text displayed in the modal header | string | 'Country/region' |\n| searchPlaceholder | Placeholder text for the search input | string | 'Search country/region' |\n| otherText | Text displayed for \"Other\" section | string | 'Other' |\n\n### Icon Customization\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| iconColor | Color for all icons | string | '#000000' |\n| dropdownIconName | MaterialIcons name for dropdown arrow | string | 'keyboard-arrow-down' |\n| dropdownIconSize | Size of dropdown icon | number | 24 |\n| closeIconName | MaterialIcons name for close button | string | 'close' |\n| closeIconSize | Size of close icon | number | 24 |\n| searchIconName | MaterialIcons name for search icon | string | 'search' |\n| searchIconSize | Size of search icon | number | 20 |\n| clearIconName | MaterialIcons name for clear button | string | 'cancel' |\n| clearIconSize | Size of clear icon | number | 20 |\n| checkIconName | MaterialIcons name for checkmark | string | 'check' |\n| checkIconSize | Size of check icon | number | 24 |\n\n### Modal Customization\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| modalAnimationType | Animation type for modal | 'none' \\| 'slide' \\| 'fade' | 'slide' |\n| modalPresentationStyle| Presentation style for modal (iOS) | 'fullScreen' \\| 'pageSheet' \\| 'formSheet' \\| 'overFullScreen' | 'fullScreen' |\n| keyboardVerticalOffset| Keyboard vertical offset | number | 0 |\n\n### Filtering & Customization\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| excludedCountries | Array of country codes to exclude | CountryCode[] | [] |\n| includedCountries | Array of country codes to include (if provided, only these will be shown) | CountryCode[] | undefined |\n| customCountryList | Custom list of countries to display | Country[] | undefined |\n| customSearchFilter | Custom search filter function | (item: Country, searchText: string) => boolean | undefined |\n\n### Callbacks\n\n| Prop | Description | Type |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|\n| onOpen | Callback when picker opens | () => void |\n| onClose | Callback when picker closes | () => void |\n| onSearch | Callback when search text changes | (searchText: string, filteredCountries: Country[]) => void |\n\n### Custom Render Functions\n\n| Prop | Description | Type |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|\n| renderFlag | Custom render function for flag | (flagUri: string, style?: StyleProp) => React.ReactNode |\n| renderCountryName | Custom render function for country name | (country: Country) => React.ReactNode |\n| renderCallingCode | Custom render function for calling code | (callingCode: string) => React.ReactNode |\n| renderListItem | Custom render function for list item (overrides default item rendering) | (country: Country, isSelected: boolean, onPress: () => void) => React.ReactNode |\n| renderSelectedCountry | Custom render function for selected country button (overrides default button) | (country: Country) => React.ReactNode |\n\n### Custom Styles\n\n| Prop | Description | Type |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|\n| colors | Custom color scheme for the component | Object (see below) |\n| containerStyle | Custom style for picker button container | StyleProp |\n| flagStyle | Custom style for flag image | StyleProp |\n| callingCodeStyle | Custom style for calling code text | StyleProp |\n| modalStyle | Custom style for modal | StyleProp |\n| searchInputStyle | Custom style for search input | StyleProp |\n| listItemStyle | Custom style for list item container | StyleProp |\n| headerStyle | Custom style for header container | StyleProp |\n| headerTextStyle | Custom style for header text | StyleProp |\n| searchContainerStyle | Custom style for search container | StyleProp |\n| listContainerStyle | Custom style for list container | StyleProp |\n| selectedItemStyle | Custom style for selected item | StyleProp |\n\n### Typography & Sizing\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| fontSize | Font sizes for different text elements | Object (see below) | - |\n| fontWeight | Font weights for different text elements | Object (see below) | - |\n| containerHeight | Height of picker button container | number | undefined |\n| containerWidth | Width of picker button container | number \\| string | undefined |\n| modalMaxHeight | Maximum height of modal | number | undefined |\n| listItemHeight | Height of each list item | number | undefined |\n\n**fontSize Object:**\n```typescript\n{\n callingCode?: number; // Default: 16\n countryName?: number; // Default: 16\n header?: number; // Default: 18\n search?: number; // Default: 16\n listItem?: number; // Default: 16\n otherSection?: number; // Default: 16\n}\n```\n\n**fontWeight Object:**\n```typescript\n{\n callingCode?: 'normal' | 'bold' | '100' | '200' | ...; // Default: '500'\n countryName?: 'normal' | 'bold' | '100' | '200' | ...; // Default: 'normal'\n header?: 'normal' | 'bold' | '100' | '200' | ...; // Default: '600'\n}\n```\n\n### Spacing & Layout\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| spacing | Spacing values for different elements | Object (see below) | - |\n| borderRadius | Border radius for different elements | Object (see below) | - |\n\n**spacing Object:**\n```typescript\n{\n containerPadding?: number; // Padding for container\n flagMargin?: number; // Margin for flag\n callingCodeMargin?: number; // Margin for calling code\n headerPadding?: number; // Padding for header\n searchMargin?: number; // Margin for search container\n listItemMargin?: number; // Margin for list items\n listItemPadding?: number; // Padding for list items\n}\n```\n\n**borderRadius Object:**\n```typescript\n{\n container?: number; // Border radius for container\n flag?: number; // Border radius for flag (default: flagSize / 2)\n search?: number; // Border radius for search input\n listItem?: number; // Border radius for list items\n modal?: number; // Border radius for modal\n}\n```\n\n### Border & Shadow\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| borderWidth | Border width for different elements | Object (see below) | - |\n| shadow | Enable shadow for different elements | Object (see below) | - |\n| elevation | Elevation for Android (shadow depth) | Object (see below) | - |\n\n**borderWidth Object:**\n```typescript\n{\n container?: number; // Border width for container\n search?: number; // Border width for search input\n listItem?: number; // Border width for list items\n}\n```\n\n**shadow Object:**\n```typescript\n{\n container?: boolean; // Enable shadow for container\n modal?: boolean; // Enable shadow for modal\n listItem?: boolean; // Enable shadow for list items\n}\n```\n\n**elevation Object:**\n```typescript\n{\n container?: number; // Android elevation for container\n modal?: number; // Android elevation for modal\n listItem?: number; // Android elevation for list items\n}\n```\n\n### Data & Sorting\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| preferredCountries | Country codes to show at the top of the list | CountryCode[] | [] |\n| sortCountries | Sort order for countries | 'name' \\| 'callingCode' \\| 'region' \\| 'custom' \\| 'none' | 'name' |\n| customSortFunction | Custom sort function | (a: Country, b: Country) => number | undefined |\n| groupByRegion | Group countries by region | boolean | false |\n| showRegionHeaders | Show region headers when grouping | boolean | false |\n| showCurrency | Show currency information | boolean | false |\n| showSubregion | Show subregion information | boolean | false |\n\n### Behavior\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| autoFocusSearch | Automatically focus search input when modal opens | boolean | false |\n| closeOnSelect | Close modal when a country is selected | boolean | true |\n| scrollToSelected | Scroll to selected country when modal opens | boolean | false |\n| highlightSelected | Highlight the selected country in the list | boolean | true |\n| selectedItemBackgroundColor | Background color for selected item | string | undefined |\n| selectedItemTextColor | Text color for selected item | string | undefined |\n| emptyStateText | Text to show when no countries found | string | 'No countries found' |\n| emptyStateComponent | Custom component to show when no countries found | React.ReactNode | undefined |\n\n### Performance\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| initialNumToRender | Number of items to render initially | number | 10 |\n| maxToRenderPerBatch | Maximum items to render per batch | number | 10 |\n| windowSize | Window size for virtualization | number | 21 |\n| removeClippedSubviews | Remove clipped subviews for better performance | boolean | true |\n| updateCellsBatchingPeriod | Period for batching updates | number | 50 |\n\n### List Configuration\n\n| Prop | Description | Type |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|\n| keyExtractor | Custom key extractor for list items | (item: Country, index: number) => string |\n| getItemLayout | Optimize list performance with item layout | (data: Country[] \\| null \\| undefined, index: number) => { length: number; offset: number; index: number } |\n| ListHeaderComponent | Component to render at the top of the list | React.ComponentType \\| React.ReactElement \\| null |\n| ListFooterComponent | Component to render at the bottom of the list | React.ComponentType \\| React.ReactElement \\| null |\n| ListEmptyComponent | Component to render when list is empty | React.ComponentType \\| React.ReactElement \\| null |\n| ItemSeparatorComponent | Component to render between list items | React.ComponentType \\| React.ReactElement \\| null |\n\n### Accessibility\n\n| Prop | Description | Type |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|\n| accessibilityLabel | Accessibility labels for different elements | Object (see below) |\n| testID | Test IDs for testing | Object (see below) |\n\n**accessibilityLabel Object:**\n```typescript\n{\n container?: string;\n search?: string;\n closeButton?: string;\n listItem?: (country: Country) => string;\n}\n```\n\n**testID Object:**\n```typescript\n{\n container?: string;\n search?: string;\n closeButton?: string;\n modal?: string;\n list?: string;\n}\n```\n\n### Advanced Styling\n\n| Prop | Description | Type | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| theme | Theme mode (light/dark/auto) | 'light' \\| 'dark' \\| 'auto' | 'light' |\n| rippleColor | Android ripple effect color | string | undefined |\n| activeOpacity | Opacity when pressed | number | 0.7 |\n| underlayColor | Underlay color for pressable (iOS) | string | undefined |\n| loading | Show loading state | boolean | false |\n| loadingComponent | Custom loading component | React.ReactNode | undefined |\n\n### Colors Object\n\n```typescript\n{\n grayLight?: string; // Default: '#E5E5E5'\n white?: string; // Default: '#FFFFFF'\n grayBackground?: string; // Default: '#F5F5F5'\n gray?: string; // Default: '#999999'\n dark?: string; // Default: '#000000'\n}\n```\n\n## Examples\n\n### Basic Usage\n\n```jsx\n {\n setCountryCode(code);\n console.log('Selected:', country.name?.common);\n console.log('Calling Code:', country.callingCode[0]);\n console.log('Currency:', country.currency[0]);\n console.log('Region:', country.region);\n }}\n/>\n```\n\n### Accessing Full Country Details\n\nThe `onSelect` callback provides both the country code and the complete country object:\n\n```jsx\n {\n // country object contains:\n // - countryCode: CountryCode\n // - name: { common: string, ... }\n // - callingCode: string[]\n // - currency: string[]\n // - region: string\n // - subregion: string\n // - flag: string (URL)\n \n setCountryCode(code);\n console.log('Full country details:', country);\n }}\n/>\n```\n\n### Custom Colors\n\n```jsx\n setCountryCode(code)}\n colors={{\n grayLight: '#D0D0D0',\n white: '#FAFAFA',\n grayBackground: '#F0F0F0',\n gray: '#888888',\n dark: '#333333',\n }}\n headerText=\"Select Country\"\n searchPlaceholder=\"Find your country\"\n iconColor=\"#007AFF\"\n/>\n```\n\n### Filter Countries\n\n```jsx\n setCountryCode(code)}\n includedCountries={['US', 'CA', 'GB', 'AU']} // Only show these countries\n // OR\n excludedCountries={['CN', 'RU']} // Exclude these countries\n/>\n```\n\n### Custom Display Options\n\n```jsx\n setCountryCode(code)}\n showFlag={true}\n showCallingCode={true}\n showCountryName={false}\n flagSize={32}\n enableSearch={true}\n/>\n```\n\n### Custom Icons\n\n```jsx\n setCountryCode(code)}\n dropdownIconName=\"arrow-drop-down\"\n closeIconName=\"close\"\n searchIconName=\"search\"\n checkIconName=\"check-circle\"\n iconColor=\"#007AFF\"\n/>\n```\n\n### Custom Render Functions\n\n```jsx\n setCountryCode(code)}\n renderSelectedCountry={(country) => (\n \n {country.name.common}\n +{country.callingCode[0]}\n \n )}\n renderListItem={(country, isSelected, onPress) => (\n \n {country.name.common}\n {isSelected && ā}\n \n )}\n/>\n```\n\n### Custom Search Filter\n\n```jsx\n setCountryCode(code)}\n customSearchFilter={(item, searchText) => {\n // Search by country name or calling code\n const nameMatch = item.name.common.toLowerCase().includes(searchText.toLowerCase());\n const codeMatch = item.callingCode.some(code => code.includes(searchText));\n return nameMatch || codeMatch;\n }}\n/>\n```\n\n### With Callbacks\n\n```jsx\n {\n setCountryCode(code);\n console.log('Selected:', code);\n console.log('Country Name:', country.name?.common);\n console.log('Calling Code:', country.callingCode[0]);\n }}\n onOpen={() => console.log('Picker opened')}\n onClose={() => console.log('Picker closed')}\n onSearch={(text, filtered) => {\n console.log('Search:', text, 'Results:', filtered.length);\n }}\n/>\n```\n\n### Typography & Sizing\n\n```jsx\n setCountryCode(code)}\n fontSize={{\n callingCode: 18,\n countryName: 16,\n header: 20,\n search: 16,\n listItem: 15,\n }}\n fontWeight={{\n callingCode: '600',\n countryName: '500',\n header: '700',\n }}\n containerHeight={60}\n containerWidth=\"100%\"\n flagSize={32}\n/>\n```\n\n### Spacing & Layout\n\n```jsx\n setCountryCode(code)}\n spacing={{\n containerPadding: 16,\n flagMargin: 12,\n callingCodeMargin: 8,\n headerPadding: 20,\n searchMargin: 16,\n listItemMargin: 8,\n listItemPadding: 12,\n }}\n borderRadius={{\n container: 12,\n flag: 16,\n search: 8,\n listItem: 6,\n modal: 0,\n }}\n/>\n```\n\n### Border & Shadow\n\n```jsx\n setCountryCode(code)}\n borderWidth={{\n container: 2,\n search: 1,\n listItem: 0,\n }}\n shadow={{\n container: true,\n modal: true,\n listItem: false,\n }}\n elevation={{\n container: 4,\n modal: 8,\n listItem: 2,\n }}\n/>\n```\n\n### Data & Sorting\n\n```jsx\n setCountryCode(code)}\n preferredCountries={['US', 'CA', 'GB', 'AU']}\n sortCountries=\"callingCode\"\n // OR\n sortCountries=\"custom\"\n customSortFunction={(a, b) => {\n // Custom sorting logic\n return a.name.common.localeCompare(b.name.common);\n }}\n showCurrency={true}\n showSubregion={true}\n/>\n```\n\n### Behavior Customization\n\n```jsx\n setCountryCode(code)}\n autoFocusSearch={true}\n closeOnSelect={true}\n scrollToSelected={true}\n highlightSelected={true}\n selectedItemBackgroundColor=\"#E3F2FD\"\n selectedItemTextColor=\"#1976D2\"\n emptyStateText=\"No matching countries\"\n/>\n```\n\n### Performance Optimization\n\n```jsx\n setCountryCode(code)}\n initialNumToRender={20}\n maxToRenderPerBatch={15}\n windowSize={30}\n removeClippedSubviews={true}\n updateCellsBatchingPeriod={100}\n getItemLayout={(data, index) => ({\n length: 60,\n offset: 60 * index,\n index,\n })}\n/>\n```\n\n### Accessibility\n\n```jsx\n setCountryCode(code)}\n accessibilityLabel={{\n container: \"Select country\",\n search: \"Search countries\",\n closeButton: \"Close country picker\",\n listItem: (country) => `Select ${country.name.common}`,\n }}\n testID={{\n container: \"country-picker\",\n search: \"country-search\",\n closeButton: \"close-button\",\n modal: \"country-modal\",\n list: \"country-list\",\n }}\n/>\n```\n\n### Advanced Styling\n\n```jsx\n setCountryCode(code)}\n theme=\"dark\"\n rippleColor=\"#6200EE\"\n activeOpacity={0.8}\n underlayColor=\"#F5F5F5\"\n loading={isLoading}\n loadingComponent={}\n/>\n```\n\n### Complete Example with All Features\n\n```jsx\n setCountryCode(code)}\n // Display\n showFlag={true}\n showCallingCode={true}\n showCountryName={false}\n flagSize={32}\n enableSearch={true}\n \n // Styling\n colors={{\n grayLight: '#E0E0E0',\n white: '#FFFFFF',\n grayBackground: '#F5F5F5',\n gray: '#9E9E9E',\n dark: '#212121',\n }}\n fontSize={{\n callingCode: 18,\n header: 20,\n }}\n spacing={{\n containerPadding: 16,\n flagMargin: 12,\n }}\n borderRadius={{\n container: 12,\n flag: 16,\n }}\n \n // Data\n preferredCountries={['US', 'CA', 'GB']}\n sortCountries=\"name\"\n showCurrency={true}\n \n // Behavior\n autoFocusSearch={true}\n highlightSelected={true}\n selectedItemBackgroundColor=\"#E3F2FD\"\n \n // Performance\n initialNumToRender={15}\n removeClippedSubviews={true}\n \n // Callbacks\n onOpen={() => console.log('Opened')}\n onClose={() => console.log('Closed')}\n onSearch={(text, results) => console.log(`Found ${results.length} countries`)}\n/>\n```\n\n## TypeScript Support\n\nThe package is written in TypeScript and includes type definitions. Import types as needed:\n\n```typescript\nimport CountryPicker from '@avaiyakapil/react-native-country-picker';\nimport { CountryCode, Country } from '@avaiyakapil/react-native-country-picker';\n```\n\n### Type Definitions\n\n- `CountryCode`: Union type of all supported country codes (ISO 3166-1 alpha-2)\n- `Country`: Country object type with the following structure:\n ```typescript\n {\n countryCode?: CountryCode;\n currency: string[];\n callingCode: string[];\n region: string;\n subregion: string;\n flag: string; // Flag emoji URL\n name: {\n common: string;\n // ... other language translations\n };\n }\n ```\n\n## Common Questions\n\n### How to get country code?\n```jsx\nonSelect={(code, country) => {\n console.log('Country Code:', code); // e.g., 'US', 'GB', 'CA'\n}}\n```\n\n### How to get calling code?\n```jsx\nonSelect={(code, country) => {\n console.log('Calling Code:', country.callingCode[0]); // e.g., '1', '44', '1'\n}}\n```\n\n### How to filter countries?\n```jsx\n\n```\n\n### How to customize appearance?\n```jsx\n\n```\n\n## Related Packages\n\n- [react-native-phone-number-input](https://www.npmjs.com/package/react-native-phone-number-input) - Complete phone number input with country picker\n- [react-native-country-list](https://www.npmjs.com/package/react-native-country-list) - Country list data\n- [react-native-flags](https://www.npmjs.com/package/react-native-flags) - Country flags component\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## Support\n\n- š§ Email: avaiyakapil@gmail.com\n- š Issues: [GitHub Issues](https://github.com/kapilavaiya/react-native-country-picker/issues)\n\n## License\n\nISC\n\n## Author\n\n**Kapil Avaiya**\n\n- GitHub: [@kapilavaiya](https://github.com/kapilavaiya)\n- Twitter: [@kapilavaiya](https://twitter.com/kapilavaiya)\n- Linkedin: [@kapilavaiya](https://www.linkedin.com/in/kapilavaiya/)\n\n---\n\nā **Star this repo if you find it helpful!**\n","readmeFilename":"README.md"}