{"_id":"rn-country-select","_rev":"6-7d64850a5798ba6813870fa75c9cd15b","name":"rn-country-select","dist-tags":{"latest":"0.5.3"},"versions":{"0.4.0":{"name":"rn-country-select","version":"0.4.0","keywords":["react-native-country-picker","rn-country-select","react-native-country-codes","country-picker","country-select","country-selector","country-list","phone-codes","internationalization","i18n","flags","typescript","offline-support","customizable","modern-ui","android","ios","cross-platform","react native country picker","react native country select"],"author":{"url":"https://github.com/AstrOOnauta","name":"AstrOOnauta"},"license":"ISC","_id":"rn-country-select@0.4.0","maintainers":[{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"}],"homepage":"https://github.com/AstrOOnauta/react-native-country-select#readme","bugs":{"url":"https://github.com/AstrOOnauta/react-native-country-select/issues"},"dist":{"shasum":"0a2253db412e307b9003d7e76d57b1bcb3f281d1","tarball":"https://registry.npmjs.org/rn-country-select/-/rn-country-select-0.4.0.tgz","fileCount":39,"integrity":"sha512-qyueo5/SKsxUtSPvhAIUDM9FVAIiY7Z1AqZO8PGSGvHT6p9N+9+vwcsPhe75fnqMZ5a3oKl4rwDa6/DLsyis4w==","signatures":[{"sig":"MEYCIQCeEcnydASg+ES+yh5FyOZgnBVMhZ0Fs3izYwZFiavmQwIhAKQWHVfNAUG6cNHLCGEDKuoA5+vIDlEXaqEMkHtdrAi+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2023378},"main":"lib/index.tsx","types":"lib/index.d.ts","gitHead":"1de216a8d14c19c1e0377c5968926547347821be","_npmUser":{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"},"repository":{"url":"git+https://github.com/AstrOOnauta/react-native-country-select.git","type":"git"},"_npmVersion":"11.6.0","description":"๐ŸŒ React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.","directories":{},"_nodeVersion":"24.8.0","publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*","react-native":"*","react-native-safe-area-context":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rn-country-select_0.4.0_1773838868273_0.7355708015154467","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"name":"rn-country-select","version":"0.4.1","keywords":["react-native-country-picker","rn-country-select","react-native-country-codes","country-picker","country-select","country-selector","country-list","phone-codes","internationalization","i18n","flags","typescript","offline-support","customizable","modern-ui","android","ios","cross-platform","react native country picker","react native country select"],"author":{"url":"https://github.com/AstrOOnauta","name":"AstrOOnauta"},"license":"ISC","_id":"rn-country-select@0.4.1","maintainers":[{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"}],"homepage":"https://github.com/AstrOOnauta/react-native-country-select#readme","bugs":{"url":"https://github.com/AstrOOnauta/react-native-country-select/issues"},"dist":{"shasum":"0f01786888ed25b868ee0334448370ae7d9d5b30","tarball":"https://registry.npmjs.org/rn-country-select/-/rn-country-select-0.4.1.tgz","fileCount":39,"integrity":"sha512-g34X5Y2cPYttsUsUmc/yvXAXzoedfh/Sz2B9PdQf4ZlGSo41syVvNSMTKuxsM/lyWD/8aFLTlTPV8nNKD1xKLA==","signatures":[{"sig":"MEUCIQCkqdacckMuoScOYhMzvylEjsM9pzebN+vT1FIxDTwl7QIgOiJGsDesJ7nVazEbqS5WAOsUk+fVY1hN3mzCVkWCpC0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2024101},"main":"lib/index.tsx","types":"lib/index.d.ts","gitHead":"9d74587568711f1477eaa1d9f46882b9703ea1d1","_npmUser":{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"},"repository":{"url":"git+https://github.com/AstrOOnauta/react-native-country-select.git","type":"git"},"_npmVersion":"10.8.2","description":"๐ŸŒ React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*","react-native":"*","react-native-safe-area-context":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rn-country-select_0.4.1_1776336572452_0.4360937681930206","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"rn-country-select","version":"0.5.0","keywords":["react-native-country-picker","rn-country-select","react-native-country-codes","country-picker","country-select","country-selector","country-list","phone-codes","internationalization","i18n","flags","typescript","offline-support","customizable","modern-ui","android","ios","cross-platform","react native country picker","react native country select"],"author":{"url":"https://github.com/AstrOOnauta","name":"AstrOOnauta"},"license":"ISC","_id":"rn-country-select@0.5.0","maintainers":[{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"}],"homepage":"https://github.com/AstrOOnauta/react-native-country-select#readme","bugs":{"url":"https://github.com/AstrOOnauta/react-native-country-select/issues"},"dist":{"shasum":"cf7e01d2092ef5e3d5390e59f738e2ccf9d5bb4f","tarball":"https://registry.npmjs.org/rn-country-select/-/rn-country-select-0.5.0.tgz","fileCount":212,"integrity":"sha512-7U4yToQa1JBXa5z5lSez7vQgEOz5baps3ujC541KaThCmNj7wSPtzDwBNKIFz5mfzHu1+ue7Kso0nZOB6LDsIA==","signatures":[{"sig":"MEQCID8mhgtfUKlvRKGHfxY9RuNUsbrbwJ5cWfZknOIJFT8lAiBUnRKBs/v3hx0E3SuTM0XrD8c/jriD0BwQQZtcA1mL+A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/rn-country-select@0.5.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":7750815},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.mjs","source":"lib/index.tsx","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs","react-native":"./lib/index.tsx"},"./package.json":"./package.json"},"gitHead":"4ce3e44f99c009176d06017f1d6cbbd1c4391baa","scripts":{"build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run typecheck && npm run build","split-countries":"node scripts/split-countries.js"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a805c1b6-b32b-4439-9194-d69649478df6"}},"repository":{"url":"git+https://github.com/AstrOOnauta/react-native-country-select.git","type":"git"},"_npmVersion":"11.14.1","description":"๐ŸŒ React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.","directories":{},"_nodeVersion":"20.20.2","react-native":"lib/index.tsx","publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","typescript":"^5.4.0","@types/react":"^18.0.0","react-native":"^0.71.0"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.65.0","react-native-safe-area-context":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rn-country-select_0.5.0_1778337939442_0.06656590740704171","host":"s3://npm-registry-packages-npm-production"}},"0.5.1":{"name":"rn-country-select","version":"0.5.1","keywords":["react-native-country-picker","rn-country-select","react-native-country-codes","country-picker","country-select","country-selector","country-list","phone-codes","internationalization","i18n","flags","typescript","offline-support","customizable","modern-ui","android","ios","cross-platform","react native country picker","react native country select"],"author":{"url":"https://github.com/AstrOOnauta","name":"AstrOOnauta"},"license":"ISC","_id":"rn-country-select@0.5.1","maintainers":[{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"}],"homepage":"https://github.com/AstrOOnauta/react-native-country-select#readme","bugs":{"url":"https://github.com/AstrOOnauta/react-native-country-select/issues"},"dist":{"shasum":"7c939024e7f52d6811e619160f2b142e3cd4d644","tarball":"https://registry.npmjs.org/rn-country-select/-/rn-country-select-0.5.1.tgz","fileCount":212,"integrity":"sha512-hU5YcMVFumsMKE7s9Y/kPkfmeZgneCMfSIA4Vp26lj8zTe1MbuYU0SH2mMWcAjXoRSx4MjyCHkuZVmVSpQBzTg==","signatures":[{"sig":"MEYCIQCSAb/50gP1gZL/+bKTebNhOxE1pPLBt8o3rZ5O3i+YPQIhALnrr5jeb0P/WNybPojNifFGZMotmDcpjvd7HDzXYAwF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/rn-country-select@0.5.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":7750367},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.mjs","source":"lib/index.tsx","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs","react-native":"./lib/index.tsx"},"./package.json":"./package.json"},"gitHead":"79ce2ecd6a6b3e1514a854bc167c56b91109e8d2","scripts":{"build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run typecheck && npm run build","split-countries":"node scripts/split-countries.js"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a805c1b6-b32b-4439-9194-d69649478df6"}},"repository":{"url":"git+https://github.com/AstrOOnauta/react-native-country-select.git","type":"git"},"_npmVersion":"11.14.1","description":"๐ŸŒ React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.","directories":{},"_nodeVersion":"20.20.2","react-native":"lib/index.tsx","publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","typescript":"^5.4.0","@types/react":"^18.0.0","react-native":"^0.71.0"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.65.0","react-native-safe-area-context":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rn-country-select_0.5.1_1778379488324_0.9343774810074272","host":"s3://npm-registry-packages-npm-production"}},"0.5.2":{"name":"rn-country-select","version":"0.5.2","keywords":["react-native-country-picker","rn-country-select","react-native-country-codes","country-picker","country-select","country-selector","country-list","phone-codes","internationalization","i18n","flags","typescript","offline-support","customizable","modern-ui","android","ios","cross-platform","react native country picker","react native country select"],"author":{"url":"https://github.com/AstrOOnauta","name":"AstrOOnauta"},"license":"ISC","_id":"rn-country-select@0.5.2","maintainers":[{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"}],"homepage":"https://github.com/AstrOOnauta/react-native-country-select#readme","bugs":{"url":"https://github.com/AstrOOnauta/react-native-country-select/issues"},"dist":{"shasum":"30c0b46c35c9af33f66d37820a963517349ec66a","tarball":"https://registry.npmjs.org/rn-country-select/-/rn-country-select-0.5.2.tgz","fileCount":50,"integrity":"sha512-C6vJdldmz74O4wIoicvJBNCLsLnzKsQ3gXtEdQvvoyCD1dt1vlclXX1XZoBu+Ftey+5Xx48HQGvTR5v76Rj4hA==","signatures":[{"sig":"MEYCIQCaSfK+MsoP8CToonCz2VMxk+vfsPNtqzUncDP1A7BxpwIhAJ+/xqBz+laYPxU2mXdKA35mQoUu5tKnrorVJ/zlNDlG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/rn-country-select@0.5.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":10523766},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","source":"lib/index.tsx","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js","react-native":"./lib/index.tsx"},"./package.json":"./package.json"},"gitHead":"d7a4787a340b2acdc6e719c941bca4438224133f","scripts":{"build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run typecheck && npm run build","split-countries":"node scripts/split-countries.js"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a805c1b6-b32b-4439-9194-d69649478df6"}},"repository":{"url":"git+https://github.com/AstrOOnauta/react-native-country-select.git","type":"git"},"_npmVersion":"11.14.1","description":"๐ŸŒ React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.","directories":{},"_nodeVersion":"20.20.2","react-native":"lib/index.tsx","publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","typescript":"^5.4.0","@types/react":"^18.0.0","react-native":"^0.71.0"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.65.0","react-native-safe-area-context":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rn-country-select_0.5.2_1778408405069_0.010260147854988633","host":"s3://npm-registry-packages-npm-production"}},"0.5.3":{"name":"rn-country-select","version":"0.5.3","description":"๐ŸŒ React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","react-native":"lib/index.tsx","source":"lib/index.tsx","exports":{".":{"types":"./dist/index.d.ts","react-native":"./lib/index.tsx","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"build":"tsup","typecheck":"tsc --noEmit && tsc -p tsconfig.check.json","test":"tsx scripts/check.ts","prepublishOnly":"npm run typecheck && npm test && npm run build"},"keywords":["react-native-country-picker","rn-country-select","react-native-country-codes","country-picker","country-select","country-selector","country-list","phone-codes","internationalization","i18n","flags","typescript","offline-support","customizable","modern-ui","android","ios","cross-platform","react native country picker","react native country select"],"repository":{"type":"git","url":"git+https://github.com/AstrOOnauta/react-native-country-select.git"},"author":{"name":"AstrOOnauta","url":"https://github.com/AstrOOnauta"},"license":"ISC","bugs":{"url":"https://github.com/AstrOOnauta/react-native-country-select/issues"},"homepage":"https://github.com/AstrOOnauta/react-native-country-select#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.65.0","react-native-safe-area-context":">=4.0.0"},"devDependencies":{"@types/node":"^26.4.1","@types/react":"^18.0.0","react":"^18.2.0","react-native":"^0.71.0","tsup":"^8.0.0","tsx":"^4.19.2","typescript":"^5.4.0"},"gitHead":"64a3f6b5d64dc1976943afb342c71bc3f94c8758","_id":"rn-country-select@0.5.3","_nodeVersion":"24.20.0","_npmVersion":"11.19.0","dist":{"integrity":"sha512-ldWVUVV4dTKTdJbFyou3XA1STTyhcbXyLZHOLjSVTfKgEMnOszavU8y2FwL1rOThKfsneLN1dQqGxLyCQ//Bog==","shasum":"64278c9d1d265e8357ccd48c3b4574105db7d46e","tarball":"https://registry.npmjs.org/rn-country-select/-/rn-country-select-0.5.3.tgz","fileCount":45,"unpackedSize":3646366,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/rn-country-select@0.5.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC/6+cMPJTlzd/Mk47jtUaApiqamsGiTcI1bcs7rXEP0AiAtMUrlGqkMcFhlh25D3hOwJ24cT/HWduMlHckmvdfb/w=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a805c1b6-b32b-4439-9194-d69649478df6"}},"directories":{},"maintainers":[{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rn-country-select_0.5.3_1788556973193_0.41424306143268375"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-18T13:01:08.168Z","modified":"2026-09-04T21:22:53.632Z","0.4.0":"2026-03-18T13:01:08.490Z","0.4.1":"2026-04-16T10:49:32.646Z","0.5.0":"2026-05-09T14:45:39.694Z","0.5.1":"2026-05-10T02:18:08.525Z","0.5.2":"2026-05-10T10:20:05.265Z","0.5.3":"2026-09-04T21:22:53.373Z"},"bugs":{"url":"https://github.com/AstrOOnauta/react-native-country-select/issues"},"author":{"name":"AstrOOnauta","url":"https://github.com/AstrOOnauta"},"license":"ISC","homepage":"https://github.com/AstrOOnauta/react-native-country-select#readme","keywords":["react-native-country-picker","rn-country-select","react-native-country-codes","country-picker","country-select","country-selector","country-list","phone-codes","internationalization","i18n","flags","typescript","offline-support","customizable","modern-ui","android","ios","cross-platform","react native country picker","react native country select"],"repository":{"type":"git","url":"git+https://github.com/AstrOOnauta/react-native-country-select.git"},"description":"๐ŸŒ React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.","maintainers":[{"name":"_astroonauta","email":"barbosa.will.1998@gmail.com"}],"readme":"
\n\n
\n \"rn-country-select\n
\n\n
\n\n

React Native Country Select

\n\n

\n ๐ŸŒ React Native country picker with flags, search, multi-select, dial codes, TypeScript, full i18n (33 languages, ISO 639-1 & ISO 639-2), and offline support. Lightweight, translations, customizable, and designed with a modern UI.\n

\n\n
\n\n
\n \n \"rn-country-select\n \n \n \"rn-country-select\n \n \n \"GitHub\n \n \n \"GitHub\n \n \n \"GitHub\n \n \n \"ISC\n \n
\n\n
\n\n
\n \n \"Buy\n \n
\n\n
\n\n## Features\n\n- ๐Ÿ“ฑ **Cross-Platform** โ€“ Works seamlessly on **iOS, Android and Web**;\n- ๐Ÿงฉ **Flexible Integration** โ€“ Supports both **React Native CLI & Expo**;\n- ๐ŸŽจ **Modern UI** - Custom component with sleek design and dark mode;\n- ๐Ÿ‘จโ€๐Ÿ’ป **Component Versatility** - Works with **functional & class components**;\n- ๐Ÿˆถ **Internationalization** - Supports **33 languages**, accepts both **ISO 639-1** (`pt`, `en`, `es`) and **ISO 639-2** (`por`, `eng`, `spa`);\n- ๐Ÿ” **Smart search** - Search by name (diacritic-insensitive), calling code, flag, alpha-2 (`BR`) and alpha-3 (`BRA`);\n- ๐Ÿ”  **Alphabet filter** - Jump-to-letter sidebar;\n- โญ **Popular section, whitelist & blacklist** of countries;\n- ๐ŸŸข **Offline-first** - Full ISO 3166-1 dataset bundled, no network calls;\n- ๐Ÿงช **Test Ready** โ€“ Smooth testing integration with stable `testID`s per country;\n- โ™ฟ **Accessibility** โ€“ Accessibility standards to screen readers.\n\n
\n\n## Try it out\n\n- [Demo](https://snack.expo.dev/rn-country-select)\n\n
\n\n## Installation\n\nTo use this library, make sure you have **rn-country-select** installed along with its required dependency **react-native-safe-area-context**:\n\n```bash\nnpm install rn-country-select react-native-safe-area-context\n```\n\nSince **react-native-safe-area-context** includes native code, you'll need to install the iOS pods on macOS to complete the linking:\n\n```bash\nnpx pod-install ios\n```\n\n
\n\n## Additional config to WEB\n\n- ### Using React Native CLI:\n\nCreate a `react-native.config.js` file at the root of your react-native project with:\n\n```bash\nmodule.exports = {\n project: {\n ios: {},\n android: {},\n },\n assets: [\n './node_modules/rn-country-select/lib/assets/fonts',\n ],\n};\n```\n\nThen link the font to your native projects with:\n\n```bash\nnpx react-native-asset\n```\n\n- ### Using Expo:\n\n1. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;\n2. Initialize the `expo-font`:\n\n```bash\n import { useFonts } from 'expo-font';\n\n ...\n\n useFonts({\n 'TwemojiMozilla': require('./node_modules/rn-country-select/lib/assets/fonts/TwemojiMozilla.woff2'),\n });\n\n ...\n```\n\n> Observation: you need to recompile your project after adding new fonts.\n\n
\n\n## Basic Usage\n\n- Class Component\n\n```jsx\nimport React, { Component } from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\nimport CountrySelect from 'rn-country-select';\n\nexport default class App extends Component {\n countryRef = null;\n\n constructor(props) {\n super(props);\n this.state = {\n showPicker: false,\n country: null,\n };\n }\n\n handleCountrySelect = (country) => {\n this.setState({ country });\n };\n\n render() {\n return (\n \n this.setState({ showPicker: true })}\n >\n Select Country\n \n \n Country:{' '}\n {`${this.state.selectedCountry?.name?.common} (${this.state.selectedCountry?.cca2})`}\n \n\n this.setState({ showPicker: false })}\n onSelect={this.handleCountrySelect}\n />\n \n );\n }\n}\n```\n\n
\n\n- Function Component\n\n```jsx\nimport React, { useState } from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\n\nimport CountrySelect from 'rn-country-select';\n\nexport default function App() {\n const [showPicker, setShowPicker] = useState(false);\n const [selectedCountry, setSelectedCountry] = useState(null);\n\n const handleCountrySelect = (country) => {\n setSelectedCountry(country);\n };\n\n return (\n \n setShowPicker(true)}>\n Select Country\n \n \n Country:{' '}\n {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}\n \n\n setShowPicker(false)}\n onSelect={handleCountrySelect}\n />\n \n );\n}\n```\n\n
\n\n- Typescript\n\n```tsx\nimport React, { useState } from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\n\nimport CountrySelect, { ICountry } from 'rn-country-select';\n\nexport default function App() {\n const [showPicker, setShowPicker] = useState(false);\n const [selectedCountry, setSelectedCountry] =\n useState(null);\n\n const handleCountrySelect = (country: ICountry) => {\n setSelectedCountry(country);\n };\n\n return (\n \n setShowPicker(true)}>\n Select Country\n \n \n Country:{' '}\n {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}\n \n\n setShowPicker(false)}\n onSelect={handleCountrySelect}\n />\n \n );\n}\n```\n\n
\n\n- Multi Select Country\n\n```tsx\nimport React, { useState } from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\n\nimport CountrySelect, { ICountry } from 'rn-country-select';\n\nexport default function App() {\n const [showPicker, setShowPicker] = useState(false);\n const [selectedCountries, setSelectedCountries] = useState<\n ICountry[]\n >([]);\n\n const handleCountrySelect = (countries: ICountry[]) => {\n setSelectedCountries(countries);\n };\n\n return (\n \n setShowPicker(true)}>\n Select Countries\n \n Countries: {selectedCountries.length}\n\n setShowPicker(false)}\n />\n \n );\n}\n```\n\n
\n\n### Modal Styles ([modalStyles](https://github.com/AstrOOnauta/react-native-country-select/blob/main/lib/interface/countrySelectStyles.ts))\n\n| Property | Type | Description |\n| ---------------------------- | --------- | ------------------------- |\n| `backdrop` | ViewStyle | Modal background overlay |\n| `container` | ViewStyle | Modal main container |\n| `content` | ViewStyle | Modal content area |\n| `dragHandleContainer` | ViewStyle | Drag Handle area |\n| `dragHandleIndicator` | ViewStyle | Drag Handle Indicator |\n| `searchContainer` | ViewStyle | Search input wrapper |\n| `searchInput` | TextStyle | Search input field |\n| `list` | ViewStyle | Countries list container |\n| `countryItem` | ViewStyle | Individual country row |\n| `flag` | TextStyle | Country flag in list |\n| `countryInfo` | ViewStyle | Country details container |\n| `callingCode` | TextStyle | Calling code in list |\n| `countryName` | TextStyle | Country name in list |\n| `sectionTitle` | TextStyle | Section headers |\n| `closeButton` | ViewStyle | Close button container |\n| `closeButtonText` | TextStyle | Close button text |\n| `countryNotFoundContainer` | ViewStyle | No results container |\n| `countryNotFoundMessage` | TextStyle | No results message |\n| `alphabetContainer` | ViewStyle | Alphabet filter container |\n| `alphabetLetter` | ViewStyle | Alphabet letter item |\n| `alphabetLetterText` | TextStyle | Alphabet letter text |\n| `alphabetLetterActive` | ViewStyle | Active letter state |\n| `alphabetLetterDisabled` | ViewStyle | Disabled letter state |\n| `alphabetLetterTextActive` | TextStyle | Active letter text |\n| `alphabetLetterTextDisabled` | TextStyle | Disabled letter text |\n\n
\n\n## CountrySelect Props ([countrySelectProps](https://github.com/AstrOOnauta/react-native-country-select/blob/main/lib/interface/countrySelectProps.ts))\n\n| Prop | Type | Required | Default | Description |\n| ---------------------------- | ----------------------------------------------------------------------- | -------- | -------------------- | -------------------------------------------------------------------------------------- |\n| visible | boolean | Yes | false | Controls the visibility of the country picker modal |\n| onClose | () => void | Yes | - | Callback function called when the modal is closed |\n| onSelect | (country: [ICountry](lib/interfaces/country.ts)) => void | Yes | - | Callback function called when a country is selected |\n| modalType | 'bottomSheet' \\| 'popup' | No | 'bottomSheet' | Type of modal to display |\n| countrySelectStyle | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts) | No | - | Custom styles for the country picker |\n| isMultiSelect | boolean | No | false | Whether the user can select multiple options |\n| selectedCountries | [ICountry[]](lib/interfaces/country.ts) | No | - | Array of countries to show in multi select mode |\n| isFullScreen | boolean | No | false | Whether the modal should be full screen |\n| popularCountries | string[] | No | [] | Array of country codes to show in popular section |\n| visibleCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to show (whitelist) |\n| hiddenCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to hide (blacklist) |\n| theme | 'light' \\| 'dark' | No | 'light' | Theme for the country picker |\n| language | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts) | No | 'eng' | Language for country names. Accepts ISO 639-1 (`pt`) or ISO 639-2 (`por`) |\n| showSearchInput | boolean | No | true | Whether to show the search input field |\n| showAlphabetFilter | boolean | No | false | Whether to show the alphabetic filter on modal |\n| searchPlaceholder | string | No | 'Search country...' | Placeholder text for search input |\n| searchPlaceholderTextColor | string | No | '#00000080' | Placeholder text color for search input |\n| searchSelectionColor | string | No | - | Passed to the search `TextInput` as `selectionColor` (cursor and selection highlight) |\n| searchFocusedBorderColor | string | No | - | Border color of the search field when focused (defaults: light `#3B82F6`, dark `#60A5FA`) |\n| minBottomsheetHeight | number \\| string | No | 30% | Minimum height for bottom sheet modal |\n| maxBottomsheetHeight | number \\| string | No | 80% | Maximum height for bottom sheet modal |\n| initialBottomsheetHeight | number \\| string | No | 50% | Initial height for bottom sheet modal |\n| disabledBackdropPress | boolean | No | false | Whether to disable backdrop press to close |\n| removedBackdrop | boolean | No | false | Whether to remove the backdrop completely |\n| onBackdropPress | (closeModal: () => void) => void | No | - | Custom callback for backdrop press |\n| dragHandleIndicatorComponent | () => ReactElement | - | - | Custom component for drag handle indicator on bottom sheet |\n| countryItemComponent | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement | No | - | Custom component for country items |\n| sectionTitleComponent | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No | - | Custom component for section titles |\n| closeButtonComponent | () => ReactElement | No | - | Custom component for closeButton |\n| customFlag | (country: [ICountry](lib/interfaces/country.ts)) => ReactElement | No | - | Custom render function for country flags. Returns rendered element in selected country |\n| showCloseButton | boolean | No | false | Whether to show the close button |\n| popularCountriesTitle | string | No | 'Popular Countries' | Popular Countries section title |\n| allCountriesTitle | string | No | 'All Countries' | All Countries section title |\n| showsVerticalScrollIndicator | boolean | No | false | Shows the vertical scroll indicator on the countries list |\n| countryNotFoundMessage | string | No | \"No countries found\" | Country not found in search |\n| allowFontScaling | boolean | No | true | Whether to allow font scaling for text elements |\n\n
\n\n### Supported Languages\n\nThe `language` prop accepts both **ISO 639-1** (2-letter) and **ISO 639-2** (3-letter) codes:\n\n| ISO 639-1 | ISO 639-2 | Language |\n| --------- | ---------- | ------------------- |\n| `ar` | `ara` | Arabic |\n| `be` | `bel` | Belarusian |\n| `br` | `bre` | Breton |\n| `bg` | `bul` | Bulgarian |\n| `cs` | `ces` | Czech |\n| `de` | `deu` | German |\n| `el` | `ell` | Greek |\n| `en` | `eng` | English (default) |\n| `et` | `est` | Estonian |\n| `fi` | `fin` | Finnish |\n| `fr` | `fra` | French |\n| `he` | `heb` | Hebrew |\n| `hr` | `hrv` | Croatian |\n| `hu` | `hun` | Hungarian |\n| `it` | `ita` | Italian |\n| `ja` | `jpn` | Japanese |\n| `ko` | `kor` | Korean |\n| `nl` | `nld` | Dutch |\n| `fa` | `per` | Persian |\n| `pl` | `pol` | Polish |\n| `pt` | `por` | Portuguese |\n| `ro` | `ron` | Romanian |\n| `ru` | `rus` | Russian |\n| `sk` | `slk` | Slovak |\n| `es` | `spa` | Spanish |\n| `sr` | `srp` | Serbian |\n| `sv` | `swe` | Swedish |\n| `tr` | `tur` | Turkish |\n| `uk` | `ukr` | Ukrainian |\n| `ur` | `urd` | Urdu |\n| `zh` | `zho` | Chinese |\n| `zh-Hans` | `zho-Hans` | Simplified Chinese |\n| `zh-Hant` | `zho-Hant` | Traditional Chinese |\n\n
\n\n## Testing\n\nWhen utilizing this package, you may need to target the CountrySelect component in your automated tests. To facilitate this, we provide a testID props for the CountrySelect component. The testID can be integrated with popular testing libraries such as @testing-library/react-native or Maestro. This enables you to efficiently locate and interact with CountrySelect elements within your tests, ensuring a robust and reliable testing experience.\n\n```js\nconst countrySelectModalContainer = getByTestId(\n 'countrySelectContainer'\n);\nconst countrySelectModalContent = getByTestId('countrySelectContent');\nconst countrySelectBackdrop = getByTestId('countrySelectBackdrop');\nconst countrySelectList = getByTestId('countrySelectList');\nconst countrySelectSearchInput = getByTestId(\n 'countrySelectSearchInput'\n);\nconst countrySelectCloseButton = getByTestId(\n 'countrySelectCloseButton'\n);\nconst countrySelectAlphabetFilter = getByTestId(\n 'countrySelectAlphabetFilter'\n);\nconst countrySelectSectionTitle = getByTestId(\n 'countrySelectSectionTitle'\n);\n\n// Per-country (suffix is the cca2 code)\nconst brazilItem = getByTestId('countrySelectItem-BR');\nconst brazilFlag = getByTestId('countrySelectItemFlag-BR');\nconst brazilCallingCode = getByTestId(\n 'countrySelectItemCallingCode-BR'\n);\nconst brazilName = getByTestId('countrySelectItemName-BR');\n```\n\n
\n\n## Accessibility\n\nEnsure your app is inclusive and usable by everyone by leveraging built-in React Native accessibility features. The accessibility props are covered and customizable by this package.\n\n### Custom Accessibility Props Available\n\n- `accessibilityLabelBackdrop`: Accessibility label for the backdrop;\n- `accessibilityHintBackdrop`: Accessibility hint for the backdrop;\n- `accessibilityLabelCloseButton`: Accessibility label for the close button;\n- `accessibilityHintCloseButton`: Accessibility hint for the close button;\n- `accessibilityLabelSearchInput`: Accessibility label for the search input;\n- `accessibilityHintSearchInput`: Accessibility hint for the search input;\n- `accessibilityLabelCountriesList`: Accessibility label for the countries list;\n- `accessibilityHintCountriesList`: Accessibility hint for the countries list;\n- `accessibilityLabelCountryItem`: Accessibility label for individual country items;\n- `accessibilityHintCountryItem`: Accessibility hint for individual country;\n- `accessibilityLabelAlphabetFilter`: Accessibility label for alphabet filter list;\n- `accessibilityHintAlphabetFilter`: Accessibility hint for alphabet filter list;\n- `accessibilityLabelAlphabetLetter`: Accessibility label for individual alphabet filter letter;\n- `accessibilityHintAlphabetLetter`: Accessibility hint for individual alphabet filter letter.\n\n
\n\n## Contributing\n\nThank you for considering contributing to **rn-country-select**!\n\n- Fork or clone this repository\n\n```bash\n $ git clone https://github.com/AstrOOnauta/react-native-country-select.git\n```\n\n- Repair, Update and Enjoy ๐Ÿ› ๏ธ๐Ÿšงโš™๏ธ\n\n- Create a new PR to this repository\n\n
\n\n## Credits\n\n@mledoze for the [countries data](https://github.com/mledoze/countries)\n\n## License\n\n[ISC](LICENSE.md)\n\n
\n\n
\n\t
\n\t Thanks for stopping by! ๐Ÿ˜\n\t
\n
\n","readmeFilename":"README.md"}