# @digieggs/rn-country-code-picker > A searchable dropdown component to select a country code for your phone number input. Latest version **1.4.4** (published 2022-05-30) · MIT license · 0 weekly downloads ## Install ```sh npm install @digieggs/rn-country-code-picker pnpm add @digieggs/rn-country-code-picker yarn add @digieggs/rn-country-code-picker bun add @digieggs/rn-country-code-picker ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.4.4 | | Published | 2022-05-30 | | First published | 2020-12-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 1.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 27 | | Maintainers | loneddonkey, isatanis | | Keywords | react-native, country, country-code, dialing code, picker, mobile, ios, android | ## Links - npm: https://www.npmjs.com/package/@digieggs/rn-country-code-picker - Repository: https://github.com/DIGIEGGS/rn-country-code-picker - Homepage: https://github.com/DIGIEGGS/rn-country-code-picker#readme - Issues: https://github.com/DIGIEGGS/rn-country-code-picker/issues - npm.io page: https://npm.io/package/@digieggs/rn-country-code-picker ## Dependencies (5) - [react](https://npm.io/package/react.md) ^17.0.2 - [react-native](https://npm.io/package/react-native.md) 0.68.1 - [react-native-svg](https://npm.io/package/react-native-svg.md) ^12.3.0 - [react-native-localize](https://npm.io/package/react-native-localize.md) ^2.2.1 - [@testing-library/react-native](https://npm.io/package/@testing-library/react-native.md) ^8.0.0 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 1.4.4 (latest) — 2022-05-30 - 1.4.3 — 2022-05-30 - 1.4.2 — 2022-05-27 - 1.4.1 — 2022-05-27 - 1.4.0 — 2022-03-18 - 1.3.2 — 2021-12-09 - 1.3.1 — 2021-12-09 - 1.3.0 — 2021-11-18 - 1.2.0 — 2021-02-08 - 1.1.1 — 2021-01-21 - 1.1.0 — 2020-12-14 - 1.0.4 — 2020-12-04 - 1.0.3 — 2020-12-04 - 1.0.2 — 2020-12-03 - 1.0.0 — 2020-12-03 ## README # React Native Country Code Picker You can read our article about this package: https://medium.com/digieggs/complete-guide-to-using-country-code-picker-in-your-react-native-projects-daedc55cc4c4 ## ![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg) ![npm](https://img.shields.io/npm/v/@digieggs/rn-country-code-picker) ![npm](https://img.shields.io/npm/dm/@digieggs/rn-country-code-picker) A searchable dropdown component to select a country code for your phone number input. ## For Managed Workflow users using Expo This component is not supported in the managed workflow for expo for the time being. ## Getting started `npm install @digieggs/rn-country-code-picker` or `yarn add @digieggs/rn-country-code-picker` Also you need to manually install `react-native-svg` and `react-native-localize` libraries for the icons in the component `npm install react-native-svg react-native-localize` or `yarn add react-native-svg react-native-localize` ### For react-native@0.60.0 or above As [react-native@0.60.0](https://reactnative.dev/blog/2019/07/03/version-60) or above supports autolinking, so there is no need to run linking process. Read more about autolinking [here](https://github.com/react-native-picker/cli/blob/master/docs/autolinking.md). #### iOS CocoaPods on iOS needs this extra step ``` npx pod-install ``` #### Android No additional step is required. ## Usage First of all, import the component. ```javascript import { CallingCodePicker } from '@digieggs/rn-country-code-picker'; ``` Then use it like this. ```javascript const [selectedCallingCode, setSelectedCallingCode] = useState(''); return setSelectedCallingCode(callingCode)} />; ``` ## Props - [`initialCountryCode`](#initialCountryCode) - [`onValueChange`](#onValueChange) - [`togglerContainerStyle`](#containerStyle) - [`togglerLabelStyle`](#pickerTogglerLabelStyle) - [`listContainerStyle`](#listContainerStyle) - [`searchInputStyle`](#searchInputStyle) - [`listStyle`](#listStyle) - [`pickerItemLabelStyle`](#pickerItemLabelStyle) - [`pickerItemContainerStyle`](#pickerItemContainerStyle) - [`style`](#style) - [`isFlagVisible`](#isFlagVisible) --- # Reference ## Props ### `initialCountryCode` the ISO 3166-1 alpha-2 code (FR, US, CA) of the country that you would like to show initially. If you don't pass a value to this, the country code based on your device locale will be used. | Type | Required | | ------ | -------- | | string | no | --- ### `onValueChange` Callback for when a country is selected. - `callingCode`: the calling code of the selected country | Type | Required | | -------- | -------- | | function | Yes | --- ### `togglerContainerStyle` Style to apply to the toggler container. | Type | Required | | --------- | -------- | | StyleProp | No | --- ### `togglerLabelStyle` Style to apply to the picker toggler label. | Type | Required | | --------- | -------- | | StyleProp | No | --- ### `listContainerStyle` Style to apply to the list container. | Type | Required | | --------- | -------- | | StyleProp | No | --- ### `searchInputStyle` Style to apply to the search input. | Type | Required | | --------- | -------- | | StyleProp | No | --- ### `listStyle` Style to apply to the FlatList component. | Type | Required | | --------- | -------- | | StyleProp | No | --- ### `pickerItemLabelStyle` Style to apply to each of the item labels. | Type | Required | | --------- | -------- | | StyleProp | No | --- ### `pickerItemContainerStyle` Style to apply to each of the item container. | Type | Required | | --------- | -------- | | StyleProp | No | --- ### `style` Style to apply to container. | Type | Required | | --------- | -------- | | StyleProp | No | --- ### `isFlagVisible` Visibility of flag component. | Type | Required | | ------- | -------- | | boolean | No | --- ## Credits - https://www.countryflags.io/ (for the flags) - https://restcountries.eu/ (fetched the info in the countries.json from this api) --- _Source: https://npm.io/package/@digieggs/rn-country-code-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._