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
- in componentDidMount, keep this.phone.getPickerData() in state
- create function for open your modal (onPressFlag in example)
- <PhoneInput onPressFlag={function in 2.} />
- 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 |
| onPressCancel |
func |
none |
handler to be called when taps the cancel button |
| onPressConfirm |
func |
none |
handler to be called when taps the confirm button |
