Home

Awesome

React Native Phone Input

Phone input box for React Native

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

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

Custom Your Own Picker

2560-02-08 01_10_222560-02-08 01_46_21
  1. in componentDidMount, keep this.phone.getPickerData() in state
  2. create function for open your modal (onPressFlag in example)
  3. <PhoneInput onPressFlag={function in 2.} />
  4. call this.phone.selectCountry for set 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}
            />

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

see full custom picker example

Custom Library Picker

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

2560-02-08 02_26_202560-02-08 02_43_18
onPressFlag(){
    this.countryPicker.openModal()
}

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

render(){
    return(
        <View style={styles.container}>
            <PhoneInput
                ref={(ref) => { this.phone = ref; }}
                onPressFlag={this.onPressFlag}
            />

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

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

Configuration

Properties:

Property NameTypeDefaultDescription
initialCountrystring'us'initial selected country
allowZeroAfterCountryCodebooltrueallow user input 0 after country code
disabledboolfalseif true, disable all interaction of this component
valuestringnullinitial phone number
styleobjectnullcustom styles to be applied if supplied
flagStyleobjectnullcustom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}}
textStyleobjectnullcustom styles for phone number text input eg. {{fontSize: 14}}
textPropsobjectnullproperties for phone number text input eg. {{placeholder: 'Telephone number'}}
textComponentfunctionTextFieldthe input component to use
offsetint10distance between flag and phone number
pickerButtonColorstring'#007AFF'set button color of country picker
pickerBackgroundColorstring'white'set background color of country picker
pickerItemStyleobjectnullcustom styles for text in country picker eg. {{fontSize: 14}}
cancelTextstring'Cancel'cancel word
confirmTextstring'Confirm'confirm word
buttonTextStyleobjectnullcustom styles for country picker button
onChangePhoneNumberfunction(number)nullfunction to be invoked when phone number is changed
onSelectCountryfunction(iso2)nullfunction to be invoked when country picker is selected
onPressFlagfunction()nullfunction to be invoked when press on flag image
countriesListarraynullcustom countries list
autoFormatboolfalseautomatically format phone number as it is entered

Functions:

Function NameReturn TypeParametersDescription
isValidNumberbooleannonereturn true if current phone number is valid
getNumberTypestringnonereturn true type of current phone number
getValuestringnonereturn current phone number
getFlagobjectiso2:stringreturn flag image
getAllCountriesobjectnonereturn country object in country picker
getPickerDataobjectnontreturn country object with flag image
focusvoidnonefocus the phone input
blurvoidnoneblur the phone input
selectCountryvoidiso2:stringset phone input to specific country
getCountryCodestringnonereturn country dial code of current phone number
getISOCodestringnonereturn country iso code of current phone number
onPressCancelfuncnonehandler to be called when taps the cancel button
onPressConfirmfuncnonehandler to be called when taps the confirm button