🔥 A material design Phone number input component for React Native Paper that has a country code picker with emoji flags for speed and low footprint. Performant and beautiful!

Theme	Number Input	Country Picker
Light
Dark

• Country code picker with emoji flags.
• Allows searching for country.
• Looks and feels consistent with React Native Paper.
• Allows specifying default country.
• Allows specifying a list of countries to show on top of the list.
• Exposes imperative methods to open and close the country code picker.
• Supports light and dark themes.
• Works well on Android, iOS and Web.

Install with your favorite package manager.

Using Yarn:

yarn add react-native-paper-phone-number-input

Using NPM:

npm i react-native-paper-phone-number-input

Import the PhoneNumberInput component from the library. You can then use it in your application like so:

// App.tsx
import React, { useState } from 'react';
import { PhoneNumberInput, getCountryByCode } from 'react-native-paper-phone-number-input';

export default function App() {
  const [countryCode, setCountryCode] = useState<string>('BD'); // Default country code
  const [phoneNumber, setPhoneNumber] = useState<string>();

  const { name, flag, dialCode } = getCountryByCode(countryCode); // Get country details

  return (
    <PhoneNumberInput
      code={countryCode}
      setCode={setCountryCode}
      phoneNumber={phoneNumber}
      setPhoneNumber={setPhoneNumber}
    />
  );
}

A more complete example can be found in the example directory.

type CountryWithoutCode = {
  name: string;
  flag: string;
  dialCode: string;
};

const getCountryByCode: (code?: string) => CountryWithoutCode;

You can set the default country by setting the code prop. This prop accepts a country code. For example, if you want to set the default country to Bangladesh, you can set the code prop to BD.

Multiple countries can have the same dial code. For example, the dial code for United States is +1 and the dial code for Canada is also +1. So, if we were to set the dial code instead of the country code, wrong flag would be shown for the country.

To solve this, this library uses the country code instead of the dial code. This library also exposes a getCountryByCode method that can be used to get the country details from the country code such as the dial code, country name and flag.

This project integrates with react-native-builder-bob. To get started:

1. Fork and Clone the repository.
2. Create your feature branch.
3. Install dependencies using yarn.
4. Run example project using yarn example android, yarn example ios or yarn example web.
5. Make your changes and create a PR!
6. Thank you.

This package is licensed under the MIT License.

Any kind of contribution is welcome. Thanks!