@digieggs/react-native-calling-code-picker v1.0.12

React Native Calling 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/react-native-calling-code-picker --save

or

yarn add @digieggs/react-native-calling-code-picker

Also you need to manually install react-native-svg library for the icons in the component

npm install react-native-svg --save

or

yarn add react-native-svg

For react-native@0.60.0 or above

As react-native@0.60.0 or above supports autolinking, so there is no need to run linking process. Read more about autolinking here.

iOS

CocoaPods on iOS needs this extra step

npx pod-install

Android

No additional step is required.

Usage

First of all, import the component.

import { CallingCodePicker } from 'react-native-calling-code-picker';

Then use it like this.

const [selectedCallingCode, setSelectedCallingCode] = useState('90'); // Give it a default value to show an initial flag and a code

return (
  <CallingCodePicker
    selectedValue={selectedCallingCode}
    onValueChange={value => setSelectedCallingCode(value)}
  />
);

Props

• selectedValue
• onValueChange
• containerStyle
• pickerTogglerLabelStyle
• listContainerStyle
• searchInputStyle
• listStyle
• pickerItemLabelStyle

Reference

Props

selectedValue

Value matching value of one of the items. Can be a string.

onValueChange

Callback for when an item is selected. This is called with the following parameters:

• itemValue: the value of the item that was selected

togglerContainerStyle

Style to apply to the toggler container container. (for ex. you can give absolute positioning to align it inside the input.)

togglerLabelStyle

SStyle to apply to the picker toggler label.

listContainerStyle

Style to apply to the list container.

searchInputStyle

Style to apply to the search input.

listStyle

Style to apply to the FlatList component.

pickerItemLabelStyle

Style to apply to each of the item labels.

Credits

• https://www.countryflags.io/ (for the flags)
• https://restcountries.eu/ (fetched the info in the countries.json from this api)