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 |

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