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

1yarn add react-native-intl-phone-field

✂️ Usage

1import IntlPhoneField from 'react-native-intl-phone-field';
2
3<IntlPhoneField
4  onEndEditing={(result) => console.log(result)}
5  onValidation={(isValid) => console.log(isValid)}
6  defaultCountry="BG"
7  defaultPrefix="+359"
8  defaultFlag="🇧🇬"
9/>

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