Narcissistic Preening Monarch


    0.1.0 • Public • Published

    React Native Phone Input

    Phone input box for React Native

    The original lib thegamenicorus/react-native-phone-input used an old version of google-libphonenumber, which has some bugs when validate the phone number starting with +86199.

    2560-02-07 01_32_33 2560-02-08 00_04_18


    npm i react-native-phone-input --save

    Basic Usage

    import PhoneInput from 'react-native-phone-input'
            <PhoneInput ref='phone'/>

    see full basic example

    Custom Your Own Picker

    2560-02-08 01_10_22 2560-02-08 01_46_21
    1. in componentDidMount, keep in state
    2. create function for open your modal (onPressFlag in example)
    3. <PhoneInput onPressFlag={function in 2.} />
    4. call for set country of <PhoneInput />
            <View style={styles.container}>
                    ref={(ref) => { = ref; }}
                    ref={(ref) => { this.myCountryPicker = ref; }}
                    onChange={(country)=>{ this.selectCountry(country) }}

    see full custom picker example

    Custom Library Picker

    use awesome react-native-country-picker-modal to select country

    2560-02-08 02_26_20 2560-02-08 02_43_18
        this.setState({cca2: country.cca2})
            <View style={styles.container}>
                    ref={(ref) => { = ref; }}
                    ref={(ref) => { this.countryPicker = ref; }}
                    onChange={(value)=> this.selectCountry(value)}

    see full custom library picker example

    Custom Countries




    Property Name Type Default Description
    initialCountry string 'us' initial selected country
    allowZeroAfterCountryCode bool true allow user input 0 after country code
    disabled bool false if true, disable all interaction of this component
    value string null initial phone number
    style object null custom styles to be applied if supplied
    flagStyle object null custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}}
    textStyle object null custom styles for phone number text input eg. {{fontSize: 14}}
    textProps object null properties for phone number text input eg. {{placeholder: 'Telephone number'}}
    textComponent function TextField the input component to use
    offset int 10 distance between flag and phone number
    pickerButtonColor string '#007AFF' set button color of country picker
    pickerBackgroundColor string 'white' set background color of country picker
    pickerItemStyle object null custom styles for text in country picker eg. {{fontSize: 14}}
    cancelText string 'Cancel' cancel word
    confirmText string 'Confirm' confirm word
    buttonTextStyle object null custom styles for country picker button
    onChangePhoneNumber function(number) null function to be invoked when phone number is changed
    onSelectCountry function(iso2) null function to be invoked when country picker is selected
    onPressFlag function() null function to be invoked when press on flag image
    countriesList array null custom countries list


    Function Name Return Type Parameters Description
    isValidNumber boolean none return true if current phone number is valid
    getNumberType string none return true type of current phone number
    getValue string none return current phone number
    getFlag object iso2:string return flag image
    getAllCountries object none return country object in country picker
    getPickerData object nont return country object with flag image
    focus void none focus the phone input
    selectCountry void iso2:string set phone input to specific country
    getCountryCode string none return country dial code of current phone number
    getISOCode string none return country iso code of current phone number


    npm i react-native-phone-input2

    DownloadsWeekly Downloads






    Unpacked Size

    2.4 MB

    Total Files


    Last publish


    • robin001