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: mdtalukder.sohan@gmail.com