react-native-phone-input
TypeScript icon, indicating that this package has built-in type declarations

1.3.7 • Public • Published

React Native Phone Input

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

2560-02-08 00_04_18 2560-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_21 2560-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 <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)

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

Package Sidebar

Install

npm i react-native-phone-input

Weekly Downloads

9,752

Version

1.3.7

License

MIT

Unpacked Size

2.01 MB

Total Files

264

Last publish

Collaborators

  • zizzle6717