A simple text input field that validates and formats international phone numbers using Google’s libphonenumber and phonenumber-js libraries.

Works with pre-populated data and displays an emoji flag if country code is derived from the number.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-native-intl-phone-field
# NPM
$ npm i react-native-intl-phone-field</pre

import IntlPhoneField from 'react-native-intl-phone-field';</pre
2. Add the component to the app.

<IntlPhoneField
  onEndEditing={(result) => console.log(result)}
  onValidation={(isValid) => console.log(isValid)}
  defaultCountry="BG"
  defaultPrefix="+359"
  defaultFlag="??"
/>

3. Possible component props.

flagUndetermined?: string;
defaultCountry?: CountryCode;
defaultPrefix?: string;
defaultValue?: string;
defaultFlag?: string;
onEndEditing?: Function;
onValidation?: Function;
containerStyle?: object;
flagContainerStyle?: object;
flagTextStyle?: object;
textInputStyle?: object;
textInputProps?: object;

Preview:

Download Details:

Author: fakeheal

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/fakeheal/react-native-intl-phone-field

License: MIT