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:

Or visit the demo on YouTube: Watch the iOS demo

For Android:

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:

| Prop | Type | Description | | ------------------------------ | ---------------------------------- | ---------------------------------------------------------------------------- | | defaultCountryCode | string | Default country code (e.g., 'US', 'PK'). Default is 'PK'. | | customCountries | Array<Country> | Custom list of countries (default uses countries.json). | | onCountrySelect | (country: Country) => void | Callback function that is triggered when a country is selected. | | onPhoneNumberChange | (phone: string) => void | Callback function that is triggered when the phone number changes. | | onFormattedPhoneNumberChange | (formattedPhone: string) => void | Callback function that is triggered when the formatted phone number changes. | | containerStyle | ViewStyle | Custom style for the container. | | flagContainerStyle | ViewStyle | Custom style for the flag container. | | countryCodeStyle | TextStyle | Custom style for the country code text. | | phoneInputStyle | TextStyle | Custom style for the phone input text. | | placeholder | string | Placeholder text for the phone input field. | | chevronColor | string | Color for the chevron icon. | | chevronSize | number | Size of the chevron icon. | | closeButtonStyle | ViewStyle | Custom style for the close button. | | closeIconColor | string | Color for the close icon. | | closeIconSize | number | Size of the close icon. | | searchContainerStyle | ViewStyle | Custom style for the search container. | | searchIconStyle | ViewStyle | Custom style for the search icon. | | searchIconColor | string | Color for the search icon. | | searchIconSize | number | Size of the search icon. | | searchInputStyle | TextStyle | Custom style for the search input field. | | countryItemStyle | ViewStyle | Custom style for each country item. | | countryItemFlagStyle | TextStyle | Custom style for the country flag in the list. | | countryItemNameStyle | TextStyle | Custom style for the country name in the list. | | countryItemCodeStyle | TextStyle | Custom 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.