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

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:

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.