react-native-phone-input

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)

• In componentDidMount, keep this.phone.getPickerData() in state
• Create a function to open your modal (onPressFlag in example)
• <PhoneInput onPressFlag={function in 2.} />
• 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