{"id":25670147,"url":"https://github.com/mmusaib/react-native-dropdown-country-picker","last_synced_at":"2025-04-23T02:25:41.871Z","repository":{"id":70732731,"uuid":"604553666","full_name":"mmusaib/react-native-dropdown-country-picker","owner":"mmusaib","description":"React Native Dropdown Country Select List","archived":false,"fork":false,"pushed_at":"2024-09-18T15:59:36.000Z","size":43,"stargazers_count":21,"open_issues_count":3,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T16:41:11.828Z","etag":null,"topics":["country","dropdown","expo","expo-country-picker","expo-dropdown","expo-picker","picker","react-native","react-native-country-picker","react-native-dropdown","react-native-picker"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-dropdown-country-picker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmusaib.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-21T09:57:59.000Z","updated_at":"2024-12-30T08:39:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"ff69117a-5eff-463b-a42d-005ed15a327b","html_url":"https://github.com/mmusaib/react-native-dropdown-country-picker","commit_stats":{"total_commits":7,"total_committers":2,"mean_commits":3.5,"dds":0.2857142857142857,"last_synced_commit":"7e2053f194a43b1f11e54d0b1524a1b9299729eb"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-dropdown-country-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-dropdown-country-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-dropdown-country-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-dropdown-country-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmusaib","download_url":"https://codeload.github.com/mmusaib/react-native-dropdown-country-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250356110,"owners_count":21417028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["country","dropdown","expo","expo-country-picker","expo-dropdown","expo-picker","picker","react-native","react-native-country-picker","react-native-dropdown","react-native-picker"],"created_at":"2025-02-24T11:30:34.085Z","updated_at":"2025-04-23T02:25:41.852Z","avatar_url":"https://github.com/mmusaib.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"|                          | |  |   |   |\r\n| --------------------------------------- | -------- | ---------- |---------- |---------- |\r\n| \u003ca href=\"https://www.npmjs.com/package/react-native-dropdown-country-picker\"\u003e![NPM VERSION](https://img.shields.io/npm/v/react-native-dropdown-country-picker?style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.npmjs.com/package/react-native-dropdown-country-picker\"\u003e![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-dropdown-country-picker?color=%232CA215\u0026label=WEEKLY%20DOWNLOADS\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://github.com/mmusaib/react-native-dropdown-country-picker/stargazers\"\u003e![GITHUB STAR](https://img.shields.io/github/stars/mmusaib/react-native-dropdown-country-picker?label=Give%20Us%20A%20Star\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.youtube.com/channel/UCSwIR2KBHiqiProH3Me8IZQ\"\u003e![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCSwIR2KBHiqiProH3Me8IZQ?label=YOUTUBE%20VIEWS\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.npmjs.com/package/react-native-dropdown-country-picker\"\u003e![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-dropdown-country-picker?color=%232CA215\u0026style=for-the-badge)\u003c/a\u003e\r\n\r\n\u003ch1 align=\"center\"\u003e\r\n  🏳️‍🌈  React Native Dropdown Country Picker\r\n\u003c/h1\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n🟢 React Native Dropdown Country Picker Similar as HTML Select List. It's not a modal. \r\n\r\n\u003ca href=\"https://twitter.com/_mmusaib\" target=\"_blank\"\u003e\u003c/a\u003e\r\n\u003cimg src=\"https://i.imgur.com/sLjgFRR.gif\" width=\"400\" /\u003e\r\n\u003c/div\u003e\r\n\r\n\r\n\r\n\u003ch4\u003eLight Weight and \u003cb\u003eRobust\u003c/b\u003e Country Picker So Far.\u003c/h4\u003e\r\n\r\n-   Equivalent to React Native Stock Component\r\n-   Use the styles of your choice\r\n-   Search the countries seamlessly\r\n-   Option to add customizable input mobile field next to the Picker\r\n-   Zero dependencies\r\n\r\n\r\n\r\n# Compatibility\r\n\r\n\r\n|  iOS  | Android | Web | Expo |\r\n--------|---------|-----|------|\r\n|  ✅  |    ✅    | ✅ |  ✅ |\r\n\r\n\r\n\r\n\r\n# 🔌 Installation\r\n\r\n```sh\r\n$ npm install react-native-dropdown-country-picker\r\n\r\n```\r\n\r\nOR\r\n\r\n```sh\r\n$ yarn add react-native-dropdown-country-picker\r\n```\r\n\r\n\r\n# 😎 Displaying the country picker\r\n```jsx\r\nimport CountryCodeDropdownPicker from 'react-native-dropdown-country-picker'\r\n\r\nconst App = () =\u003e {\r\n  const [selected, setSelected] = React.useState('+91');\r\n  const [country, setCountry] = React.useState('');\r\n  const [phone, setPhone] = React.useState('');\r\n\r\n  return(\r\n    \u003cCountryCodeDropdownPicker \r\n        selected={selected} \r\n        setSelected={setSelected}\r\n        setCountryDetails={setCountry} \r\n        phone={phone} \r\n        setPhone={setPhone} \r\n        countryCodeTextStyles={{fontSize: 13}}\r\n      /\u003e\r\n  )\r\n\r\n};\r\n```\r\n\r\n\r\n\r\nFor Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-dropdown-country-picker)\r\n\r\n# ⭐ Props  for  the component\r\n| Name | Type | Description | Default |\r\n| ---- | ---- | ----------- | ----------- |\r\n| selected | state var | The default selected country dial code stored in state variable | N/A\r\n| setSelected | Function | setState function to set the selected state variable | N/A\r\n| setCountryDetails | Function | setState function to set additional country details in respective state variable (Optional) | N/A\r\n| phone | state var | state variable if you want to display phone number field  (Optional) | N/A\r\n| setPhone | Funtion | setState function to set the phone state variable (Optional) | N/A\r\n| countryCodeContainerStyles | style Object | style object to style the country code container (Optional) | N/A\r\n| countryCodeTextStyles | style object | style object to style the text inside country code container (Optional) | N/A\r\n| phoneStyles | style object | style object to style the text input of phone field (Optional) | N/A\r\n| searchIcon | string | URL of the icon if you want to replace the search icon (Optional) | N/A\r\n| closeIcon | string | URL of the icon if you want to replace the close icon (Optional) | N/A\r\n| searchStyles | style object | style object to style the search field (Optional) | N/A\r\n| searchTextStyles | style object | style object to style the search text input field (Optional) | N/A\r\n| dropdownStyles | style object | style object to style the dropdown container (Optional) | N/A\r\n| dropdownTextStyles | style object | style object to style the text inside dropdown container (Optional) | N/A\r\n\r\n\r\n\r\n\r\n\r\n\r\n# ▶️ Watch Tutorial Video --\u003e\r\n\r\n [![Watch video](https://i.imgur.com/QcWCHk9.png)](https://www.youtube.com/watch?v=ZstelmTWhjw)\r\n\r\n\r\n\u003c!-- For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmusaib%2Freact-native-dropdown-country-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmusaib%2Freact-native-dropdown-country-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmusaib%2Freact-native-dropdown-country-picker/lists"}