Phone input box for React Native
npm install react-native-phone-input2The original lib thegamenicorus/react-native-phone-input used an old version of google-libphonenumber, which has some bugs when validate the phone number starting with +86199.
|!2560-02-07 01_32_33|!2560-02-08 00_04_18|
|---------------|----------|
npm i react-native-phone-input --save
`Basic Usage
`jsx
import PhoneInput from 'react-native-phone-input'render(){
return(
)
}
`
see full basic exampleCustom 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 exampleCustom 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 exampleCustom Countries
`jsx
countriesList={require('./countries.json')}
/>
``