{"id":30805404,"url":"https://github.com/simformsolutionspvtltd/react-native-country-code-select","last_synced_at":"2025-09-06T00:57:08.299Z","repository":{"id":43603715,"uuid":"490976461","full_name":"SimformSolutionsPvtLtd/react-native-country-code-select","owner":"SimformSolutionsPvtLtd","description":"A React Native component that allows users to select a country code ✨ 🔥","archived":false,"fork":false,"pushed_at":"2022-07-12T08:27:04.000Z","size":8849,"stargazers_count":44,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-08-15T15:45:18.315Z","etag":null,"topics":["country-code","country-codes","country-flags","country-list","country-picker","countrycodes","countrynames","react","react-native","typescript"],"latest_commit_sha":null,"homepage":"","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/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-11T05:59:49.000Z","updated_at":"2025-07-24T03:07:33.000Z","dependencies_parsed_at":"2022-07-08T05:24:28.301Z","dependency_job_id":null,"html_url":"https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/SimformSolutionsPvtLtd/react-native-country-code-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-country-code-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-country-code-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-country-code-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-country-code-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/react-native-country-code-select/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-country-code-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273842836,"owners_count":25177921,"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","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-code","country-codes","country-flags","country-list","country-picker","countrycodes","countrynames","react","react-native","typescript"],"created_at":"2025-09-06T00:57:05.796Z","updated_at":"2025-09-06T00:57:08.285Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Country Code Select - Simform](./assets/banner.png)\n\n# react-native-country-code-select\n\n[![npm version](https://img.shields.io/badge/npm%20package-0.0.3-orange)](https://www.npmjs.org/package/react-native-country-code-select) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)\n\n---\n\nThis is a pure javascript library for selecting a country with search and filter functionality\n\nThis library is easy to use and provides you full customization, so you can customize component based on your need\n\n## 🎬 Preview\n\n---\n\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select\"\u003e\u003cimg width=\"300\" alt=\"SimformSolutions\" src=\"./assets/sample1.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select\"\u003e\u003cimg width=\"300\" alt=\"SimformSolutions\" src=\"./assets/sample3.gif\"\u003e\u003c/a\u003e\n     \u003c/td\u003e\n      \u003ctd\u003e\u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select\"\u003e\u003cimg width=\"300\" alt=\"SimformSolutions\" src=\"./assets/sample2.gif\"\u003e\u003c/a\u003e\n     \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\n---\n\n## Quick Access\n\n[Installation](#installation) | [CountryPicker](#countrypicker) | [Methods](#methods) | [Properties](#props) | [Example](#example) | [License](#license)\n\n## Installation\n\n##### 1. Install library, react-native-reanimated and react-native-gesture-handler\n\n```bash\n$ npm install react-native-country-code-select react-native-reanimated react-native-gesture-handler\n# --- or ---\n$ yarn add react-native-country-code-select react-native-reanimated react-native-gesture-handler\n```\n\n##### 2. Install cocoapods in the ios project\n\n```bash\ncd ios \u0026\u0026 pod install\n```\n\n\u003e Note: Make sure to wrap your root component / entry point with [GestureHandleRootView](https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/)\n\n```bash\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\nexport default const App = () =\u003e {\n  return \u003cGestureHandlerRootView\u003e{/* content */}\u003c/GestureHandlerRootView\u003e;\n}\n```\n\n\u003e Note: Make sure to add Reanimated's babel plugin to your `babel.config.js`\n\n```bash\n  module.exports = {\n      ...\n      plugins: [\n          ...\n          'react-native-reanimated/plugin',\n      ],\n  };\n```\n\n##### Know more about [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler), [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)\n\n---\n\n## Compatibility\n\n---\n\nOnly supports `react-native` `0.62+`\n\n---\n\n## CountryPicker\n\n#### 🎬 Preview\n\n---\n\n![Default CountryPicker](./assets/sample1.gif)\n\n#### Basic usage\n\n---\n\n```jsx\nimport React, { useState } from 'react';\nimport { StyleSheet, Text, View, TouchableOpacity } from 'react-native';\nimport { CountryPickerModal } from 'react-native-country-code-select';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\n\nconst App = () =\u003e {\n  const [isVisible, setIsVisible] = useState(false);\n  const [selectedValue, setSelectedValue] = useState({});\n  return (\n    \u003cGestureHandlerRootView style={styles.container}\u003e\n      \u003cView style={styles.viewStyle}\u003e\n        \u003cText style={styles.textView}\u003e\n          {JSON.stringify(selectedValue, null, 2)}\n        \u003c/Text\u003e\n        \u003cText style={styles.separator}\u003e{'-- --'}\u003c/Text\u003e\n        \u003cTouchableOpacity\n          activeOpacity={0.8}\n          style={styles.selectCountryButton}\n          onPress={() =\u003e setIsVisible((oldStatus) =\u003e !oldStatus)}\n        \u003e\n          \u003cText style={styles.selectCountry}\u003eSelect Country\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n        \u003cCountryPickerModal\n          isVisible={isVisible}\n          onClose={() =\u003e setIsVisible(false)}\n          {...{ onSelect: setSelectedValue }}\n        /\u003e\n      \u003c/View\u003e\n    \u003c/GestureHandlerRootView\u003e\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#e6d7b8',\n  },\n  textView: {\n    width: '60%',\n    backgroundColor: '#261a08',\n    padding: 20,\n    borderWidth: 1,\n    borderRadius: 20,\n    overflow: 'hidden',\n    color: '#ffffff',\n    fontWeight: '500',\n  },\n  viewStyle: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  selectCountryButton: {\n    width: '60%',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingVertical: 15,\n    backgroundColor: '#261a08',\n    borderRadius: 20,\n  },\n  selectCountry: {\n    color: '#ffffff',\n    fontWeight: 'bold',\n    fontSize: 16,\n  },\n  separator: {\n    marginVertical: 20,\n    letterSpacing: 2,\n    fontSize: 15,\n    fontWeight: 'bold',\n  },\n});\n```\n\n---\n\n## Selected Country Data\n\n```javascript\n{\n  name: string;\n  flag: string;\n  countryInitials: string;\n  region: string;\n  subregion: string;\n  callingCode: string[];\n  currency: string[];\n}\n```\n\n## Methods\n\n\u003e | Name           | Default | Type     | \u003cdiv style=\"width:290px\"\u003eDescription\u003c/div\u003e                         |\n\u003e | :------------- | :------ | :------- | :----------------------------------------------------------------- |\n\u003e | **onClose\\***  | -       | function | Close modal callback function                                      |\n\u003e | **onSelect\\*** | -       | function | Select country callback function that returns the selected country |\n\n## Props\n\n\u003e | Name                          |                Default                | Type                | \u003cdiv style=\"width:290px\"\u003eDescription\u003c/div\u003e                  |\n\u003e | :---------------------------- | :-----------------------------------: | :------------------ | ----------------------------------------------------------- |\n\u003e | **isVisible\\***               |                 false                 | boolean             | Hide / show country list modal                              |\n\u003e | customBackImageSource         |                 Image                 | ImageSourcePropType | Custom close modal image source                             |\n\u003e | customBackImageStyle          |                  {}                   | ImageStyle          | Close modal image style                                     |\n\u003e | isFlagVisible                 |                 true                  | boolean             | If false, Country flag will be hidden                       |\n\u003e | isAlphabetsVisible            |                 true                  | boolean             | If false, Quick country fliter will be hidden               |\n\u003e | headerSearchPlaceholder       |            \"Enter Country\"            | string              | Custom search placeholder text                              |\n\u003e | isSearchInputVisible          |                 true                  | boolean             | If false, Search input will be hidden                       |\n\u003e | renderCustomSearchInput       |                   -                   | function            | Render custom search input                                  |\n\u003e | searchHeaderInputStyle        |                  {}                   | ViewStyle           | Search input style                                          |\n\u003e | isCloseButtonVisible          |                 false                 | boolean             | If true, Modal close button will be visible                 |\n\u003e | searchHeaderProps             |                  {}                   | TextInputProps      | Search input props                                          |\n\u003e | countryListTitleStyle         |                  {}                   | TextStyle           | Country name / title style                                  |\n\u003e | modalContentStyle             |                  {}                   | ViewStyle           | Modal content style                                         |\n\u003e | modalContainerStyle           |                  {}                   | ViewStyle           | Modal container style                                       |\n\u003e | customRowStyle                |                  {}                   | ViewStyle           | Country list item / row style                               |\n\u003e | customAlphabetsStyles         |                  {}                   | TextStyle           | Quick filter (A-Z) text style                               |\n\u003e | customAlphabetContainerStyles |                  {}                   | ViewStyle           | Quick filter (A-Z) container style                          |\n\u003e | emptyText                     | `Oops, there is no country available` | string              | Custom message to show when there's no search result found  |\n\u003e | emptyTextStyle                |                  {}                   | TextStyle           | Custom empty message style                                  |\n\u003e | emptyContainerStyles          |                  {}                   | ViewStyle           | Custom empty message container style                        |\n\u003e | renderCustomEmptyComponent    |                   -                   | function            | Render custom component when there's no search result found |\n\u003e | customCloseButton             |                   -                   | function            | Render custom modal close button                            |\n\u003e | renderSearchInputClear        |                   -                   | function            | Render custom cancel image in search input                  |\n\u003e | handleStyle                   |                  {}                   | ViewStyle           | View style to be applied to the handle bar component        |\n\u003e | handleComponent               |                   -                   | function            | Render custom handle bar component                          |\n\n---\n\n## Example\n\nA full working example project is here [Example](./example/src/App.tsx)\n\n```sh\n$ yarn\n$ yarn example ios   // For ios\n$ yarn example android   // For Android\n```\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select/stargazers) for this repository.⭐\n\n## Bugs / Feature requests / Feedbacks\n\nFor bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select/issues/new?labels=bug\u0026late=BUG_REPORT.md\u0026title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEEDBACK%5D%3A)\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## License\n\n- [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-country-code-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-country-code-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-country-code-select/lists"}