Phone input box for React Native
npm i react-native-phone-input --save
import PhoneInput from 'react-native-phone-input'
render(){
return(
<PhoneInput ref='phone'/>
)
}
see full basic example
- in componentDidMount, keep this.refs.phone.getPickerData() in state
- create function for open your modal (onPressFlag in example)
- <PhoneInput onPressFlag={function in 2.} />
- call this.refs.phone.selectCountry for set country of <PhoneInput />
componentDidMount(){
this.setState({
pickerData: this.refs.phone.getPickerData()
})
}
onPressFlag(){
this.refs.myCountryPicker.open()
}
selectCountry(country){
this.refs.phone.selectCountry(country.iso2)
}
render(){
return(
<View style={styles.container}>
<PhoneInput
ref='phone'
onPressFlag={this.onPressFlag}
/>
<ModalPickerImage
ref='myCountryPicker'
data={this.state.pickerData}
onChange={(country)=>{ this.selectCountry(country) }}
cancelText='Cancel'
/>
</View>
)
}
see full custom picker example
use awesome react-native-country-picker-modal to select country
onPressFlag(){
this.refs.countryPicker.openModal()
}
selectCountry(country){
this.refs.phone.selectCountry(country.cca2.toLowerCase())
this.setState({cca2: country.cca2})
}
render(){
return(
<View style={styles.container}>
<PhoneInput
ref='phone'
onPressFlag={this.onPressFlag}
/>
<CountryPicker
ref='countryPicker'
onChange={(value)=> this.selectCountry(value)}
translation='eng'
cca2={this.state.cca2}
>
<View></View>
</CountryPicker>
</View>
)
}
see full custom library picker example
Property Name |
Type |
Default |
Description |
initialCountry |
string |
'us' |
initial selected country |
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 |
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 countryCode of current phone number |