React-Native-INTL-Phone-input-field

It's an international phone input component with phone mask for Android and iOS.

!demo sample

USAGE

Install npm library

``node
npm install react-native-intl-phone-input-field
`

İmport library

`js
import IntlPhoneInput from 'react-native-intl-phone-input-field';
`

Use component

`js
onChangeText = ({dialCode, unmaskedPhoneNumber, phoneNumber, isVerified}) => {
console.log(dialCode, unmaskedPhoneNumber, phoneNumber, isVerified);
};
render() {
return (

XX} />

);
}
`

Custom Modal Example

`js
renderCustomModal=(modalVisible, countries, onCountryChange) => (





🔍

style={{ flex: 1 }}
data={countries}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
onCountryChange(item.code)}>
{item['your language code here for example tr']}

)}
/>

this.phoneInput.hideModal()}>
CLOSE



)

render(){
return ref={(ref) => this.phoneInput = ref}
customModal={this.renderCustomModal}
defaultCountry="TR"
lang="TR"
/>;
}

``

Supported Languages | |
--- | --- |
TR | Turkish |
LT | Lithuanian |
EN | English |
RU | Russian |

prop names |type |default value | comment
--- | --- | --- | ---
countriesData | Array | | You can upload your own country information
lang | String | | Translate country name on modal
placeholder | String | | This prop change the phone input placeholder
defaultCountry | String | TR | You can change your default country code
mask | String | | You can set custom mask
onChangeText | Function | | This function works when input text is changed
customModal | Function | | Generate your custom modal
phoneInputStyle | Style | | This prop is about the text field's ReactNative.TextInput style
containerStyle | Style | | This prop is about the text field's container style
dialCodeTextStyle | Style | |
flagStyle | Style | |
modalContainer | Style | | This prop is about the modal field's SafeAreaView style.
filterInputStyle | Style | | This prop is about the top of model filter text style
closeButtonStyle | Style | | This prop is about text style of bottom modal
modalCountryItemCountryNameStyle | Style | |
filterText | String | Filter | This is the text of placeholder input of top modal
closeText | String | CLOSE | This prop is about the text of bottom modal
disableCountryChange | Bool | false | This prop is about disable open select country modal
renderAction | Function | | This prop attaching a component right of phone input
placeholderTextColor | String | black | This prop allows you to assign a color to the placeholderText

License


Based on React-Native-INTL-Phone-input