React Native Intl Phone Field

Try the Expo Snack 👏

🕹️ 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 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

``sh
yarn add react-native-intl-phone-field
`

✂️ Usage

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

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 |
| flagContainerStyle | object | undefined | Styles for the flag emoji wrapper |
| flagTextStyle | object | undefined | Styles for the flag emoji |
| textInputStyle | object | undefined | Styles for the underlying |
| textInputProps | object | undefined | Additional props for the underlying ` |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT