react-native-intl-phone-field

React Native text input for validating international phone numbers, built on top of libphonenumber by Google using phonenumber-js.

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

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

GitHub

View Github