It is an international phone component.
npm install react-native-intl-phone-input
install npm library
```
npm install react-native-intl-phone-input
İmport library
``
import IntlPhoneInput from 'react-native-intl-phone-input';`
use component`
onChangeText = ({dialCode, unmaskedPhoneNumber, phoneNumber, isVerified}) => {
console.log(dialCode, unmaskedPhoneNumber, phoneNumber, isVerified);
};
render() {
return (
);
}
Custom Modal Example
`
renderCustomModal=(modalVisible, countries, onCountryChange) => (
data={countries}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
)}
/>
)
render(){
return
customModal={this.renderCustomModal}
defaultCountry="TR"
lang="TR"
/>;
}
``
Supported Languages | |
--- | --- |
TR | Turkish |
LT | Lithuanian |
EN | English |
RU | Russian |
prop names |type |default value | comment
--- | --- | --- | ---
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
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