rn-phone-input-field

A lightweight React Native phone number input with a built-in country code picker, country-aware validation, TypeScript types, and no runtime dependencies.

Features

• Built for React Native iOS and Android
• No runtime dependencies
• Country picker with calling codes
• Country-aware phone number validation
• Automatic digit sanitization and country-specific max length
• Light and dark mode support
• Fully typed TypeScript API
• Customizable container, text input, country code, arrow icon, and search input

Installation

npm install rn-phone-input-field

yarn add rn-phone-input-field

pnpm add rn-phone-input-field

Peer Dependencies

This package expects React and React Native to be installed in your app:

{
  "react": ">=16.8.0",
  "react-native": ">=0.60.0"
}

Quick Start

import React, { useRef, useState } from 'react';
import { SafeAreaView, Text, View } from 'react-native';
import PhoneInput, { type PhoneInputRef } from 'rn-phone-input-field';

export default function App() {
  const phoneInputRef = useRef<PhoneInputRef>(null);
  const [message, setMessage] = useState('');

  const handleChange = (phoneNumber: string) => {
    const isValid = phoneInputRef.current?.isValidNumber?.(phoneNumber) ?? false;

    setMessage(isValid ? 'Valid phone number.' : 'Enter a valid phone number.');
  };

  return (
    <SafeAreaView>
      <View style={{ padding: 20 }}>
        <PhoneInput
          ref={phoneInputRef}
          defaultCountry="US"
          placeholder="Enter phone number"
          onChangeText={handleChange}
          onSelectCountryCode={(country) => {
            console.log(country.countryCode);
            console.log(country.callingCode);
          }}
        />

        {!!message && <Text style={{ marginTop: 8 }}>{message}</Text>}
      </View>
    </SafeAreaView>
  );
}

You can also use the named export:

import { PhoneInput } from 'rn-phone-input-field';

Default Value

defaultValue accepts local or international-looking values. If the value starts with a known calling code, the component selects that country and stores the national number in the input.

<PhoneInput defaultCountry="BD" defaultValue="+8801712345678" />

The value emitted by onChangeText is sanitized to digits only.

Validation

Use the component ref to validate the current input against the selected country.

import React, { useRef } from 'react';
import PhoneInput, { type PhoneInputRef } from 'rn-phone-input-field';

const phoneInputRef = useRef<PhoneInputRef>(null);

const isValid = phoneInputRef.current?.isValidNumber?.('1712345678') ?? false;

isValidNumber can validate a national number, a number with the selected calling code, or a number with a + prefix.

Custom Styling

<PhoneInput
  defaultCountry="GB"
  placeholder="Mobile number"
  placeholderColor="#6B7280"
  containerStyle={{
    borderColor: '#D1D5DB',
    borderRadius: 8,
    paddingHorizontal: 14,
  }}
  codeTextStyle={{
    color: '#111827',
    fontWeight: '700',
  }}
  textInputStyle={{
    color: '#111827',
    fontSize: 16,
  }}
/>

Dark Mode

<PhoneInput darkMode placeholder="Enter phone number" />

TextInput Props

Use inputProps for the phone number input and searchInputProps for the country picker search input.

<PhoneInput
  inputProps={{
    accessibilityLabel: 'Phone number',
    returnKeyType: 'done',
  }}
  searchInputProps={{
    placeholder: 'Search country',
  }}
/>

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | onChangeText | (value: string) => void | undefined | Called with the sanitized phone number whenever the input changes. | | onSelectCountryCode | (country: SelectedCountry) => void | undefined | Called when the selected country changes. | | defaultCountry | CountryCode | 'US' | Initial country, using an ISO country code such as 'US', 'BD', or 'GB'. | | defaultValue | string | '' | Initial phone number value. | | containerStyle | StyleProp<ViewStyle> | undefined | Style for the outer input container. | | placeholder | string | undefined | Phone input placeholder text. | | placeholderColor | ColorValue | '#999' | Placeholder text color. | | inputProps | TextInputProps | undefined | Props passed to the phone number TextInput. | | textInputStyle | StyleProp<TextStyle> | undefined | Style for the phone number text input. | | downArrowIcon | React.ReactNode | built-in icon | Custom country picker arrow icon. | | iconContainerStyle | StyleProp<ViewStyle> | undefined | Style for the country selector area. | | codeTextStyle | StyleProp<TextStyle> | undefined | Style for the calling code text. | | darkMode | boolean | false | Uses the built-in dark color set. | | searchInputProps | TextInputProps | undefined | Props passed to the country picker search input. |

Ref Methods

| Method | Type | Description | | --- | --- | --- | | isValidNumber | (value: string) => boolean | Validates a phone number for the currently selected country. | | onChangeText | (value: string) => void | Programmatically updates the input value. | | defaultCountry | (code: CountryCode) => void | Programmatically changes the selected country. | | defaultValue | (text: string) => void | Programmatically applies a new default value. |

TypeScript

import PhoneInput, {
  type CountryCode,
  type PhoneInputProps,
  type PhoneInputRef,
} from 'rn-phone-input-field';

onSelectCountryCode returns:

type SelectedCountry = {
  countryCode: string;
  callingCode: string;
};

Example App

This repository includes a React Native example app in the example directory.

cd example
npm install
npm run android

or:

cd example
npm install
npm run ios

Contributing

Contributions are welcome. Please read CONTRIBUTING.md before opening a pull request.

License

MIT. See LICENSE for details.

Support

• Issues: GitHub Issues
• Email: [email protected]