{"id":19040135,"url":"https://github.com/logisticinfotech/react-native-custom-country-picker","last_synced_at":"2026-06-19T04:31:37.035Z","repository":{"id":65759007,"uuid":"599024983","full_name":"logisticinfotech/react-native-custom-country-picker","owner":"logisticinfotech","description":"custom design country picker for react native","archived":false,"fork":false,"pushed_at":"2023-02-08T13:43:07.000Z","size":575,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-03T11:09:48.246Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/logisticinfotech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-08T09:46:10.000Z","updated_at":"2023-02-08T10:01:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"be8b56ed-9094-4a47-a8fe-f78bc152ffeb","html_url":"https://github.com/logisticinfotech/react-native-custom-country-picker","commit_stats":{"total_commits":11,"total_committers":2,"mean_commits":5.5,"dds":0.09090909090909094,"last_synced_commit":"8c27cae3e569d93dcff314ef4049ad96c5faf423"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/logisticinfotech/react-native-custom-country-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Freact-native-custom-country-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Freact-native-custom-country-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Freact-native-custom-country-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Freact-native-custom-country-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logisticinfotech","download_url":"https://codeload.github.com/logisticinfotech/react-native-custom-country-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Freact-native-custom-country-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34517748,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"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":[],"created_at":"2024-11-08T22:20:43.177Z","updated_at":"2026-06-19T04:31:37.013Z","avatar_url":"https://github.com/logisticinfotech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-custom-country-picker\n\n## Getting started\n\n`$ npm install @logisticinfotech/react-native-custom-country-picker --save`\n\n### Mostly automatic installation\n\n`$ react-native link @logisticinfotech/react-native-custom-country-picker`\n\n## Usage\n```javascript\nimport CountryPicker from '@logisticinfotech/react-native-custom-country-picker';\n\n// TODO: What to do with the module?\nCountryPicker;\n```\n\n## Country picker with Country Code with custom color and theme for react native support both platform iOS and Android\n\n1. country picker plugin.\n2. Cross platform compatibility android and ios both.\n3. Search country using country name.\n4. Support multiple language.\n5. Dynamically change dropdown, search and back button images.\n6. Customizable search bar style,container style and text colors.\n7. Change animation(Slide, fade, none).\n8. Support dark and light theme.\n\n## Installation\n\n\u003e **npm install @logisticinfotech/react-native-custom-country-picker --save**\n\n\n\u003cdiv\u003e\n\u003cimg  width=\"90\" height=\"200\" src=\"android.jpg\"\u003e \n\u003cimg  width=\"92\" height=\"200\" src=\"iPhone.png\"\u003e\n\u003c/div\u003e\n\n\n## Usage\n\n```tsx\nimport React, {useState} from 'react';\nimport {StatusBar, StyleSheet, Text, View} from 'react-native';\nimport CountryPicker from '@logisticinfotech/react-native-custom-country-picker';\n\nconst App = () =\u003e {\n  const [countryCode, setCountryCode] = useState\u003cstring\u003e('IN');\n\n  const selectedValue = (value: string) =\u003e {\n    console.log(value);\n    setCountryCode(value);\n  };\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cStatusBar\n        backgroundColor={'#000'}\n        barStyle=\"light-content\"\n        translucent\n      /\u003e\n      \u003cText style={styles.titleText}\u003e\n        React Native Dark Theme Country Picker\n      \u003c/Text\u003e\n\n      \u003cCountryPicker\n        disable={false}\n        animationType={'slide'}\n        containerStyle={styles.pickerStyle}\n        pickerTitleStyle={styles.pickerTitleStyle}\n        dropDownImage={require('./res/ic_drop_down.png')}\n        selectedCountryTextStyle={styles.selectedCountryTextStyle}\n        countryNameTextStyle={styles.countryNameTextStyle}\n        pickerTitle={'Country Picker'}\n        searchBarPlaceHolder={'Search......'}\n        hideCountryFlag={false}\n        hideCountryCode={false}\n        searchBarStyle={styles.searchBarStyle}\n        countryFlagStyle={styles.roundImageStyle}\n        dropDownImageStyle={styles.dropDownStyle}\n        flatListStyle={styles.flatListStyle}\n        theme={'dark'}\n        backButtonImage={require('./res/ic_back_black.png')}\n        searchButtonImage={require('./res/ic_search.png')}\n        countryCode={countryCode}\n        hideSearchBar={false}\n        hidePickerTitle={true}\n        selectedValue={selectedValue}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\nexport default App;\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#000',\n  },\n  titleText: {\n    color: '#fff',\n    fontSize: 25,\n    marginBottom: 25,\n    fontWeight: 'bold',\n    textAlign: 'center',\n  },\n  pickerTitleStyle: {\n    justifyContent: 'center',\n    flexDirection: 'row',\n    alignSelf: 'center',\n    fontWeight: 'bold',\n  },\n  pickerStyle: {\n    height: 54,\n    width: 150,\n    marginVertical: 10,\n    borderColor: '#efefef',\n    alignItems: 'center',\n    marginHorizontal: 10,\n    padding: 10,\n    backgroundColor: '#000',\n    borderRadius: 5,\n    borderWidth: 2,\n    fontSize: 16,\n    color: '#fff',\n  },\n  selectedCountryTextStyle: {\n    paddingLeft: 5,\n    color: '#fff',\n    textAlign: 'right',\n  },\n\n  countryNameTextStyle: {\n    paddingLeft: 10,\n    textAlign: 'right',\n  },\n\n  searchBarStyle: {\n    flex: 1,\n  },\n  roundImageStyle: {\n    height: 34,\n    width: 34,\n    borderRadius: 17,\n  },\n  dropDownStyle: {\n    tintColor: '#fff',\n  },\n  flatListStyle: {\n    padding: 5,\n  },\n});\n\n```\n\n## Properties\n\n```\n  animationType?: \"none\" | \"slide\" | \"fade\" | undefined;                  defaultValues: ===\u003e  \"slide\"\n  containerStyle?: ViewStyle;\n  searchBarStyle?: ViewStyle;\n  searchBarContainerStyle?: ViewStyle;\n  pickerTitleStyle?: TextStyle;\n  countryNameTextStyle?: TextStyle;\n  selectedCountryTextStyle?: TextStyle;\n  dropDownImage?: ImageSourcePropType;                                    defaultValues: ===\u003erequire(\"./res/ic_drop_down.png\")\n  backButtonImage?: ImageSourcePropType;                                  defaultValues: ===\u003erequire(\"./res/ic_back_black.png\")\n  searchButtonImage?: ImageSourcePropType;                                defaultValues: ===\u003erequire(\"./res/ic_search.png\")\n  dropDownImageStyle?: ImageStyle;\n  countryFlagStyle?: ImageStyle;\n  flatListStyle?: ViewStyle;\n  safeAreaStyle?: ViewStyle;\n  theme: \"dark\" | \"light\";                                                defaultValues: ===\u003e \"light\"\n  countryCode?: string | any;                                             defaultValues: ===\u003e\"IN\"\n  hideCountryFlag?: boolean;                                              defaultValues: ===\u003e false\n  hideCountryCode?: boolean;                                              defaultValues: ===\u003e false\n  searchBarPlaceHolder?: string;                                          defaultValues: ===\u003e\"Search...\"\n  pickerTitle?: string;                                                   defaultValues: ===\u003e \"\"\n  disable?: boolean;                                                      defaultValues: ===\u003e false\n  selectedValue?: Function;                                               defaultValues: ===\u003e \"\"\n  hideSearchBar?: boolean;                                                defaultValues: ===\u003e false\n  hidePickerTitle?: boolean;                                              defaultValues: ===\u003etrue\n  language:\n    | \"common\"\n    | \"ces\"\n    | \"cym\"\n    | \"deu\"\n    | \"fra\"                                                               defaultValues:==\u003e \"common\"\n    | \"hrv\"\n    | \"ita\"\n    | \"jpn\"\n    | \"nld\"\n    | \"por\"\n    | \"rus\"\n    | \"slk\"\n    | \"spa\"\n    | \"fin\"\n    | \"est\"\n    | \"zho\"\n    | \"pol\"\n    | \"urd\"\n    | \"kor\";                                                            \n```\n\n## Country Code\n  {\n  'AF',\n  'AL',\n  'DZ',\n  'AS',\n  'AD',\n  'AO',\n  'AI',\n  'AQ',\n  'AG',\n  'AR',\n  'AM',\n  'AW',\n  'AU',\n  'AT',\n  'AZ',\n  'BS',\n  'BH',\n  'BD',\n  'BB',\n  'BY',\n  'BE',\n  'BZ',\n  'BJ',\n  'BM',\n  'BT',\n  'BO',\n  'BA',\n  'BW',\n  'BV',\n  'BR',\n  'IO',\n  'VG',\n  'BN',\n  'BG',\n  'BF',\n  'BI',\n  'KH',\n  'CM',\n  'CA',\n  'CV',\n  'BQ',\n  'KY',\n  'CF',\n  'TD',\n  'CL',\n  'CN',\n  'CX',\n  'CC',\n  'CO',\n  'KM',\n  'CK',\n  'CR',\n  'HR',\n  'CU',\n  'CW',\n  'CY',\n  'CZ',\n  'CD',\n  'DK',\n  'DJ',\n  'DM',\n  'DO',\n  'EC',\n  'EG',\n  'SV',\n  'GQ',\n  'ER',\n  'EE',\n  'SZ',\n  'ET',\n  'FK',\n  'FO',\n  'FJ',\n  'FI',\n  'FR',\n  'GF',\n  'PF',\n  'TF',\n  'GA',\n  'GM',\n  'GE',\n  'DE',\n  'GH',\n  'GI',\n  'GR',\n  'GL',\n  'GD',\n  'GP',\n  'GU',\n  'GT',\n  'GG',\n  'GN',\n  'GW',\n  'GY',\n  'HT',\n  'HM',\n  'HN',\n  'HU',\n  'IS',\n  'IN',\n  'ID',\n  'IR',\n  'IQ',\n  'IE',\n  'IM',\n  'IL',\n  'IT',\n  'CI',\n  'JM',\n  'JP',\n  'JE',\n  'JO',\n  'KZ',\n  'KE',\n  'XK',\n  'KW',\n  'KG',\n  'LA',\n  'LV',\n  'LB',\n  'LS',\n  'LR',\n  'LY',\n  'LI',\n  'LT',\n  'LU',\n  'MO',\n  'MK',\n  'MG',\n  'MW',\n  'MY',\n  'MV',\n  'ML',\n  'MT',\n  'MH',\n  'MQ',\n  'MR',\n  'MU',\n  'YT',\n  'MX',\n  'FM',\n  'MD',\n  'MC',\n  'MN',\n  'ME',\n  'MS',\n  'MA',\n  'MZ',\n  'MM',\n  'NA',\n  'NR',\n  'NP',\n  'NL',\n  'NC',\n  'NZ',\n  'NI',\n  'NE',\n  'NG',\n  'NU',\n  'NF',\n  'KP',\n  'MP',\n  'NO',\n  'OM',\n  'PK',\n  'PW',\n  'PS',\n  'PA',\n  'PG',\n  'PY',\n  'PE',\n  'PH',\n  'PN',\n  'PL',\n  'PT',\n  'PR',\n  'QA',\n  'CG',\n  'RO',\n  'RU',\n  'RW',\n  'RE',\n  'BL',\n  'SH',\n  'KN',\n  'LC',\n  'MF',\n  'PM',\n  'VC',\n  'WS',\n  'SM',\n  'SA',\n  'SN',\n  'RS',\n  'SC',\n  'SL',\n  'SG',\n  'SX',\n  'SK',\n  'SI',\n  'SB',\n  'SO',\n  'ZA',\n  'GS',\n  'KR',\n  'SS',\n  'ES',\n  'LK',\n  'SD',\n  'SR',\n  'SJ',\n  'SE',\n  'CH',\n  'SY',\n  'ST',\n  'TW',\n  'TJ',\n  'TZ',\n  'TH',\n  'TL',\n  'TG',\n  'TK',\n  'TO',\n  'TT',\n  'TN',\n  'TR',\n  'TM',\n  'TC',\n  'TV',\n  'UG',\n  'UA',\n  'AE',\n  'GB',\n  'US',\n  'UM',\n  'VI',\n  'UY',\n  'UZ',\n  'VU',\n  'VA',\n  'VE',\n  'VN',\n  'WF',\n  'EH',\n  'YE',\n  'ZM',\n  'ZW',\n  'KI',\n  'HK',\n  'AX'\n}","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogisticinfotech%2Freact-native-custom-country-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogisticinfotech%2Freact-native-custom-country-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogisticinfotech%2Freact-native-custom-country-picker/lists"}