React Native Phone Input

Demo of Phone Input box for React Native (android/ios)

| | | | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |

Versions

• 0.x.x has been deprecated and is no longer maintained
• 1.x.x is the current version and is actively maintained (please submit a PR for improvements)

Installation

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

Basic Usage

import PhoneInput from 'react-native-phone-input'

render(){
    return(
        <PhoneInput ref='phone'/>
    )
}

see full basic example

Using a Custom Country Picker

(android/ios)

| | | | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |

1. In componentDidMount, keep this.phone.getPickerData() in state
2. Create a function to open your modal (onPressFlag in example)
3. <PhoneInput onPressFlag={function in 2.} />
4. Call this.phone.selectCountry to set the country of <PhoneInput />

componentDidMount(){
    this.setState({
        pickerData: this.phone.getPickerData()
    })
}

onPressFlag(){
    this.myCountryPicker.open()
}

selectCountry(country){
    this.phone.selectCountry(country.iso2)
}

render(){
    return(
        <View style={styles.container}>
            <PhoneInput
                ref={(ref) => { this.phone = ref; }}
                onPressFlag={this.onPressFlag}
                initialCountry={'us'}
                initialValue="13178675309"
                textProps={{
                    placeholder: 'Enter a phone number...'
                }}
            />

            <ModalPickerImage
                ref={(ref) => { this.myCountryPicker = ref; }}
                data={this.state.pickerData}
                onChange={(country)=>{ this.selectCountry(country) }}
                cancelText='Cancel'
            />
        </View>
    )
}

see full custom picker example

Using a Custom (External) Library Picker

We recommend using the awesome react-native-country-picker-modal to select country

(android/ios) | | | | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |

onPressFlag(){
    this.countryPicker.openModal()
}

selectCountry(country){
    this.phone.selectCountry(country.cca2.toLowerCase())
    this.setState({cca2: country.cca2})
}

// Updates the Flag on change
onPhoneInputChange = (value, iso2) => {
    const newState = {
        phoneInputValue: value,
    };

    if (iso2) {
        newState.countryCode = iso2?.toUpperCase();
    }

    this.setState(newState);
}

render(){
    return(
        <View style={styles.container}>
            <PhoneInput
                ref={(ref) => { this.phone = ref; }}
                onPressFlag={this.onPressFlag}
                initialCountry={'us'}
                initialValue="13178675309"
                onChangePhoneNumber={this.onPhoneInputChange}
                textProps={{
                    placeholder: 'Enter a phone number...'
                }}
            />

            <CountryPicker
                ref={(ref) => { this.countryPicker = ref; }}
                onChange={(value)=> this.selectCountry(value)}
                translation='eng'
                cca2={this.state.cca2}
            >
                <View></View>
            </CountryPicker>
        </View>
    )
}

see full custom library picker example

Custom Flag component

If you need to change how the flag is rendered, you can use the renderFlag property. This function is passed the flag image source as a named imageSource argument.

Note: if you just need custom styles for the flag image, you can pass the flagStyle prop, only use renderFlag if you need to change what components are actually rendered within the touchable area of the flag.

<PhoneInput 
    renderFlag={({ imageSource }) => {
        return (
            <View>
                <Icon name="chevron" />
                <Image source={imageSource} width={customWidth} height={customHeight} style={customStyles} />
            </View>
        )
    }}
/>

Custom Countries

<PhoneInput countriesList={require('./countries.json')} />

Configuration

Properties:

| Property Name | Type | Default | Description | | ------------------------- | ------------------------- | ------------------| ------------------------------------------------------------------------------ | | autoFormat | boolean | false | Format phone number while typing | | accessibilityLabel | string | 'Telephone input' | Label for accessibility purposes | | 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 | | initialValue | 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 | | cancelTextStyle | object | null | custom styles for country picker cancel button | | confirmTextStyle | object | null | custom styles for country picker confirm 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 | | renderFlag | function({ imageSource }) | null | custom render function for the flag component, passed an image src | | countriesList | array | null | custom countries list |

Functions:

| 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 (unformatted) | | 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 | | blur | void | none | blur the phone input | | selectCountry | void | iso2:string | set phone input to specific country | | setValue | void | string | set phone input value | | getCountryCode | string | none | return country dial code of current phone number | | getISOCode | string | none | return country iso code of current phone number | | onPressCancel | func | none | handler to be called when taps the cancel button | | onPressConfirm | func | none | handler to be called when taps the confirm button |