React Native Phone Input

Phone input box for React Native

| !2560-02-07 01_32_33 | !2560-02-08 00_04_18 |
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |

Installation

``
npm i react-native-phone-input --save
`

Basic Usage

`jsx
import PhoneInput from 'react-native-phone-input'

render(){
return(

)
}
`

see full basic example

Custom Your Own Picker

| !2560-02-08 01_10_22 | !2560-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. \
4. call this.phone.selectCountry for set country of \

`jsx
componentDidMount(){
this.setState({
pickerData: this.phone.getPickerData()
})
}

onPressFlag(){
this.myCountryPicker.open()
}

selectCountry(country){
this.phone.selectCountry(country.iso2)
}

render(){
return(

ref={(ref) => { this.phone = ref; }}
onPressFlag={this.onPressFlag}
/>

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

)
}
`

see full custom picker example

Custom Library Picker

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

| !2560-02-08 02_26_20 | !2560-02-08 02_43_18 |
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |


`jsx
onPressFlag(){
this.countryPicker.openModal()
}

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

render(){
return(

ref={(ref) => { this.phone = ref; }}
onPressFlag={this.onPressFlag}
/>

ref={(ref) => { this.countryPicker = ref; }}
onChange={(value)=> this.selectCountry(value)}
translation='eng'
cca2={this.state.cca2}
>



)
}
`

see full custom library picker example

Custom Countries

`jsx

``

Configuration

$3

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

$3

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