1.3.7 • Published 8 months ago

react-native-phone-input v1.3.7

Weekly downloads
7,949
License
MIT
Repository
github
Last release
8 months ago

React Native Phone Input

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

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

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)

2560-02-08 01_46_212560-02-08 01_10_22
  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 \
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) | 2560-02-08 02_43_18 | 2560-02-08 02_26_20 | | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |

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 NameTypeDefaultDescription
autoFormatbooleanfalseFormat phone number while typing
accessibilityLabelstring'Telephone input'Label for accessibility purposes
initialCountrystring'us'initial selected country
allowZeroAfterCountryCodebooltrueallow user input 0 after country code
disabledboolfalseif true, disable all interaction of this component
initialValuestringnullinitial 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
cancelTextStyleobjectnullcustom styles for country picker cancel button
confirmTextStyleobjectnullcustom styles for country picker confirm 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
renderFlagfunction({ imageSource })nullcustom render function for the flag component, passed an image src
countriesListarraynullcustom countries list

Functions:

Function NameReturn TypeParametersDescription
isValidNumberbooleannonereturn true if current phone number is valid
getNumberTypestringnonereturn true type of current phone number
getValuestringnonereturn current phone number (unformatted)
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
setValuevoidstringset phone input value
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