International Phone Number Input Component For React Native

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 i react-native-intl-phone-field</pre
import IntlPhoneField from 'react-native-intl-phone-field';</pre

2. Add the component to the app.
  onEndEditing={(result) => console.log(result)}
  onValidation={(isValid) => console.log(isValid)}

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;


International Phone Number Input Component For React Native

Download Details:

Author: fakeheal

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment