react-native-phone-input
Version:
Phone input box for React Native
223 lines (177 loc) • 11.6 kB
Markdown
# React Native Phone Input
Demo of Phone Input box for React Native (android/ios)
|  |  |
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
## Versions
* 0.x.x has been deprecated and is no longer maintained
* 1.x.x is the current version and is actively maintained (please submit a PR for improvements)
## Installation
```
npm i react-native-phone-input --save
```
## Basic Usage
```jsx
import PhoneInput from 'react-native-phone-input'
render(){
return(
<PhoneInput ref='phone'/>
)
}
```
[see full basic example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/BasicExample/app.js)
## Using a Custom Country Picker
(android/ios)
|  |  |
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
1. In componentDidMount, keep this.phone.getPickerData() in state
2. Create a function to open your modal (onPressFlag in example)
3. \<PhoneInput onPressFlag={function in 2.} />
4. Call this.phone.selectCountry to set the country of \<PhoneInput />
```jsx
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}
initialCountry={'us'}
initialValue="13178675309"
textProps={{
placeholder: 'Enter a phone number...'
}}
/>
<ModalPickerImage
ref={(ref) => { this.myCountryPicker = ref; }}
data={this.state.pickerData}
onChange={(country)=>{ this.selectCountry(country) }}
cancelText='Cancel'
/>
</View>
)
}
```
[see full custom picker example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/CustomPicker/app.js)
## Using a Custom (External) Library Picker
We recommend using the awesome [react-native-country-picker-modal](https://github.com/xcarpentier/react-native-country-picker-modal) to select country
(android/ios)
|  |  |
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
```jsx
onPressFlag(){
this.countryPicker.openModal()
}
selectCountry(country){
this.phone.selectCountry(country.cca2.toLowerCase())
this.setState({cca2: country.cca2})
}
// Updates the Flag on change
onPhoneInputChange = (value, iso2) => {
const newState = {
phoneInputValue: value,
};
if (iso2) {
newState.countryCode = iso2?.toUpperCase();
}
this.setState(newState);
}
render(){
return(
<View style={styles.container}>
<PhoneInput
ref={(ref) => { this.phone = ref; }}
onPressFlag={this.onPressFlag}
initialCountry={'us'}
initialValue="13178675309"
onChangePhoneNumber={this.onPhoneInputChange}
textProps={{
placeholder: 'Enter a phone number...'
}}
/>
<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](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/CustomLibraryPicker/app.js)
## Custom Flag component
If you need to change how the flag is rendered, you can use the `renderFlag` property. This function is passed the flag image source as a named `imageSource` argument.
> Note: if you just need custom styles for the flag image, you can pass the `flagStyle` prop, only use `renderFlag` if you need to change what components are actually rendered within the touchable area of the flag.
```jsx
<PhoneInput
renderFlag={({ imageSource }) => {
return (
<View>
<Icon name="chevron" />
<Image source={imageSource} width={customWidth} height={customHeight} style={customStyles} />
</View>
)
}}
/>
```
## Custom Countries
```jsx
<PhoneInput countriesList={require('./countries.json')} />
```
## Configuration
### Properties:
| Property Name | Type | Default | Description |
| ------------------------- | ------------------------- | ------------------| ------------------------------------------------------------------------------ |
| autoFormat | boolean | false | Format phone number while typing |
| accessibilityLabel | string | 'Telephone input' | Label for accessibility purposes |
| 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 |
| initialValue | 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 |
| cancelTextStyle | object | null | custom styles for country picker cancel button |
| confirmTextStyle | object | null | custom styles for country picker confirm 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 |
| renderFlag | function({ imageSource }) | null | custom render function for the flag component, passed an image src |
| 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 (unformatted) |
| 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 |
| setValue | void | string | set phone input value |
| 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 |