Phone input box for React Native

React Native Phone Input

Phone input box for React Native.

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

  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

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 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
autoFormat bool false automatically format phone number as it is entered

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
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
getCountryCode string none return country dial code of current phone number
getISOCode string none return country iso code of current phone number

GitHub