0.3.0 âĸ Published 2 years ago
react-native-intl-phone-field v0.3.0
đšī¸ Demo
It's a javascript-only (no native code) component that can run in iOS, Android, Expo & React Native Web. Below you can gifs of the demo app that showcases the component in action.
Click on the image to see it in a larger size.
đ Introduction
A simple <TextInput> that validates and formats international phone numbers using Google's library libphonenumber and phonenumber-js. Works with pre-propulated data and displays an emoji flag if country code is derived from the number. Additionally, adds a + sign infront of the number, so it's considered international.
âī¸ Installation
yarn add react-native-intl-phone-fieldâī¸ Usage
import IntlPhoneField from 'react-native-intl-phone-field';
<IntlPhoneField
onEndEditing={(result) => console.log(result)}
onValidation={(isValid) => console.log(isValid)}
defaultCountry="BG"
defaultPrefix="+359"
defaultFlag="đ§đŦ"
/>For more detailed example, take a look at the demo app inside example/.
âĒ Props
| Property | Type | Default | Description |
|---|---|---|---|
| flagUndetermined | string? | â | Displayed when country code cannot be derived from current phone number. |
| onEndEditing | function | undefined | Callback that is called when text input ends text input ends. It receives result. |
| onValidation | function | undefined | Callback that is called each time the validation status changes. |
| onValueUpdate | function | undefined | Callback that is called each time the underlying value changes. |
| defaultCountry | string | undefined | Two letter code for default country, eg. BG |
| defaultPrefix | string | undefined | Default number prefix, eg. +359 |
| defaultValue | string | undefined | Default value for the TextInput, if you want to pre-populate it. |
| defaultFlag | string | undefined | Emoji for the default flag, eg. đ§đŦ |
| containerStyle | object | undefined | Styles for the component's wrapper <View /> |
| flagContainerStyle | object | undefined | Styles for the flag emoji wrapper <View /> |
| flagTextStyle | object | undefined | Styles for the flag emoji <Text /> |
| textInputStyle | object | undefined | Styles for the underlying <TextInput /> |
| textInputProps | object | undefined | Additional props for the underlying <TextInput /> |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT