Naively Programmable Module

    @digieggs/rn-country-code-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.4 • Public • Published

    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 npm npm

    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 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 '@digieggs/rn-country-code-picker';

    Then use it like this.

    const [selectedCallingCode, setSelectedCallingCode] = useState('');
    
    return <CallingCodePicker onValueChange={callingCode => setSelectedCallingCode(callingCode)} />;

    Props


    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

    Install

    npm i @digieggs/rn-country-code-picker

    DownloadsWeekly Downloads

    322

    Version

    1.4.4

    License

    MIT

    Unpacked Size

    1.98 MB

    Total Files

    945

    Last publish

    Collaborators

    • loneddonkey
    • isatanis