rn-international-phone-number

rn-international-phone-number is an international mobile phone input component designed for React Native, Expo, and React Native Web. It provides a complete user experience for phone number entry, including a country dial code selector, flag picker, and automatic phone number masking.

Key capabilities include:

• Auto-formatting: Applies a phone mask based on the selected country.
• Validation: Validates phone numbers with an optional onValidationChange callback.
• Line Type Detection: Identifies if a number is MOBILE, FIXED_LINE, TOLL_FREE, VOIP, etc.
• Smart Paste: Automatically switches the country when an E.164 formatted number is pasted.
• Headless UI: Provides the usePhoneInput hook for developers who want to build completely custom UIs using the library's logic.
• Cross-Platform: Fully compatible with iOS, Android, and Web.

This library provides a comprehensive international phone input solution for React Native, Expo, and React Native Web. Key features include:

• Phone Input Mask: Automatic formatting based on the selected country.
• Validation: Optional onValidationChange callback to track number validity.
• Line Type Detection: Identifies if a number is MOBILE, FIXED_LINE, TOLL_FREE, VOIP, etc.
• Smart Paste: Automatically detects and switches the country when an E.164 number is pasted.
• Dynamic Placeholder: Displays country-aware example numbers when placeholderType="number" is used.
• Headless Hook: The usePhoneInput hook allows for building fully custom UIs by exposing all internal state and setters.
• i18n: Support for 33 languages.
• Cross-Platform: Works on iOS, Android, and Web.

When using the defaultPhoneNumber prop on the PhoneInput component, follow these formatting rules:

• Use the format: +(country code)(area code)(number).
• If the provided defaultPhoneNumber is not E.164-compatible, the component will attempt to maintain the best possible local formatting.

The PhoneInput component exposes a wide range of React Native accessibility props to help you build inclusive applications. You can customize the accessibilityLabel and accessibilityHint for almost every interactive element within the phone input field and the country selector modal (including the search input, country list, and alphabet filter).

<PhoneInput
  accessibilityLabelPhoneInput="Phone number input"
  accessibilityHintPhoneInput="Enter your mobile number"
  accessibilityLabelCountriesButton="Select country"
  accessibilityLabelSearchInput="Search for a country"
  // ... other props
/>

Install the rn-international-phone-number package along with its required peer dependency react-native-safe-area-context.

If you are developing for iOS on macOS, you must also install the iOS pods to complete the native linking process.

npm install rn-international-phone-number react-native-safe-area-context

npx pod-install ios

To support web functionality in a React Native CLI project, you must manually link the fonts used by rn-country-select.

1. Create a react-native.config.js file in your project root with the following configuration:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [
    './node_modules/rn-country-select/lib/assets/fonts',
  ],
};

2. Run the asset linking command:

npx react-native-asset

The PhoneInput component provides a ready-to-use international phone number input with a country dial code selector and flag picker. You can control the phone number and the selected country using value, onChangePhoneNumber, country, and onChangeCountry props.

import React, {useState} from 'react';
import {View} from 'react-native';
import PhoneInput, {ICountry} from 'rn-international-phone-number';

export default function App() {
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState<ICountry | null>(null);

  return (
    <View style={{flex: 1, padding: 24}}>
      <PhoneInput
        value={phone}
        onChangePhoneNumber={setPhone}
        country={country}
        onChangeCountry={setCountry}
      />
    </View>
  );
}

To support web functionality in an Expo project, you need to install expo-font and load the required emoji font at app startup.

1. Install expo-font:

npx expo install expo-font

2. Load the TwemojiMozilla font in your application entry point:

import {useFonts} from 'expo-font';

useFonts({
  TwemojiMozilla: require('./node_modules/rn-country-select/lib/assets/fonts/TwemojiMozilla.woff2'),
});

Note: You must recompile your project after adding new fonts.

You can localize the country selector in the PhoneInput component using the language prop. This prop accepts either a 2-letter ISO 639-1 code or a 3-letter ISO 639-2 code.

For example, to set the language to Portuguese or Simplified Chinese, pass the corresponding code to the language prop.

<PhoneInput language="pt" />
<PhoneInput language="zh-Hans" />

The rn-international-phone-number package is an international mobile phone input component for React Native. Key capabilities include:

• Auto-formatting: Dynamic masking based on the selected country.
• Validation: Built-in phone number validation.
• Line-type detection: Identifies line types (e.g., MOBILE, FIXED_LINE, TOLL_FREE).
• Smart Paste: Intelligent handling of pasted phone numbers.
• Dynamic Placeholder: Placeholders update based on country context.
• Headless Support: Provides a headless hook for custom UI implementations.
• i18n: Supports 33 languages.
• Cross-platform: Works on iOS, Android, and Web.
• Form Integration: Ready for use with react-hook-form, formik, and @tanstack/react-form.