International Phone Number Input Component For React Native

Description:

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:

International Phone Number Input Component For React Native

Add Comment