1.0.3 • Published 7 months ago

react-native-country-phone-input v1.0.3

Weekly downloads
-
License
ISC
Repository
-
Last release
7 months ago

react-native-country-phone-input

A customizable React Native component for country-based phone number input. This package provides a user-friendly interface for selecting countries and entering phone numbers with automatic country code handling. It includes features like country flag selection, search, and phone number formatting.

Features

  • Country Picker: Allows users to select their country from a list with flags.
  • Phone Number Input: Supports phone number entry with automatic country code formatting.
  • Search: Built-in search functionality to filter countries by name.
  • Customizable Styles: Highly customizable styles for various parts of the component.
  • Modal Animation: Smooth animations for showing and hiding the country picker modal.

Demo

Check out the demo videos to see how the react-native-country-phone-input component works:

For iOS:

iOS Demo Video

Or visit the demo on YouTube: Watch the iOS demo

For Android:

Android Demo Video

Or visit the demo on YouTube: Watch the Android demo


Installation

To install the package, run the following command in your project directory:

npm install react-native-country-phone-input

or

yarn add react-native-country-phone-input

Ensure you have the required dependencies:

  • react-native-vector-icons: Make sure this is installed for icon support.

Usage

Here's an example of how to use the react-native-country-phone-input component:

import React from "react";
import { View, StyleSheet } from "react-native";
import CountryPickerPhoneInput from "react-native-country-phone-input";

const App = () => {
  return (
    <View style={styles.container}>
      <CountryPickerPhoneInput
        onCountrySelect={(country) => {
          console.log(country);
        }}
        onPhoneNumberChange={(phone) => {
          console.log(phone);
        }}
        onFormattedPhoneNumberChange={(phone) => {
          console.log("onFormattedPhoneNumberChange", phone);
        }}
        containerStyle={{ borderColor: "#aaa" }}
        flagContainerStyle={{ backgroundColor: "#aaa" }}
        countryCodeStyle={{ color: "#aaa" }}
        phoneInputStyle={{ color: "#aaa" }}
        chevronColor={"#FFF"}
        chevronSize={22}
        closeIconSize={20}
        closeIconColor="#FFF"
        searchContainerStyle={{ borderColor: "#aaa", borderRadius: 50 }}
        placeholderTextColor="#aaa"
        searchIconColor="#aaa"
        searchInputStyle={{ color: "#aaa" }}
        countryItemStyle={{ backgroundColor: "#FFF" }}
        countryItemFlagStyle={{}}
        countryItemNameStyle={{ color: "#000" }}
        countryItemCodeStyle={{ color: "#000" }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

Props

Here are the available props for the CountryPickerPhoneInput component:

PropTypeDescription
defaultCountryCodestringDefault country code (e.g., 'US', 'PK'). Default is 'PK'.
customCountriesArray<Country>Custom list of countries (default uses countries.json).
onCountrySelect(country: Country) => voidCallback function that is triggered when a country is selected.
onPhoneNumberChange(phone: string) => voidCallback function that is triggered when the phone number changes.
onFormattedPhoneNumberChange(formattedPhone: string) => voidCallback function that is triggered when the formatted phone number changes.
containerStyleViewStyleCustom style for the container.
flagContainerStyleViewStyleCustom style for the flag container.
countryCodeStyleTextStyleCustom style for the country code text.
phoneInputStyleTextStyleCustom style for the phone input text.
placeholderstringPlaceholder text for the phone input field.
chevronColorstringColor for the chevron icon.
chevronSizenumberSize of the chevron icon.
closeButtonStyleViewStyleCustom style for the close button.
closeIconColorstringColor for the close icon.
closeIconSizenumberSize of the close icon.
searchContainerStyleViewStyleCustom style for the search container.
searchIconStyleViewStyleCustom style for the search icon.
searchIconColorstringColor for the search icon.
searchIconSizenumberSize of the search icon.
searchInputStyleTextStyleCustom style for the search input field.
countryItemStyleViewStyleCustom style for each country item.
countryItemFlagStyleTextStyleCustom style for the country flag in the list.
countryItemNameStyleTextStyleCustom style for the country name in the list.
countryItemCodeStyleTextStyleCustom style for the country code in the list.

Country Data Format

The default country data is provided from a countries.json file. Each country object should have the following format:

{
  "name": "Pakistan",
  "code": "PK",
  "iso": "PK",
  "flag": "🇵🇰"
}

You can pass a custom list of countries using the customCountries prop.

License

This package is licensed under the MIT License.