react-native-phone-entry

react-native-phone-entry

react-native-phone-entry is a simple and fully modifiable Phone Number Input Component for React Native that provides an intuitive interface for entering and validating international phone numbers. It includes country code selection, number formatting, and validation features.

Looking for an OTP input component to verify phone numbers? Check out react-native-otp-entry - a simple and fully modifiable OTP Input Component for React Native that provides an intuitive interface for entering one-time passwords.

Autopick Feature

A feature that automatically picks the right country while typing the phone number.

Masking Feature

A feature that picks a right mask based on the country code.

Features

• 🌍 International phone number input with country picker
• 📱 Automatic phone number formatting based on country
• 🔍 Dynamic country and mask adaptation based on typed country code
• ✨ Highly customizable appearance and styling
• 🎯 Phone number validation using Google's libphonenumber
• 🎨 Dark theme support
• ♿ Accessibility support
• 💪 Written in TypeScript

Installation

npm install react-native-phone-entry

# or

yarn add react-native-phone-entry

Usage

• Import the PhoneInput component:

import { PhoneInput, isValidNumber } from 'react-native-phone-entry';

• Basic usage:

export default function App() {
  const [countryCode, setCountryCode] = useState < CountryCode > 'US';
  return (
    <PhoneInput
      defaultValues={{
        countryCode: 'US',
        callingCode: '+1',
        phoneNumber: '+1',
      }}
      onChangeText={(text) =>
        console.log(
          'Phone number:',
          text,
          'isValidNumber:',
          isValidNumber(text, countryCode)
        )
      }
      onChangeCountry={(country) => {
        console.log('Country:', country);
        setCountryCode(country.cca2);
      }}
    />
  );
}

• Advanced usage with customization:

<PhoneInput
  defaultValues={{
    countryCode: 'US',
    callingCode: '+1',
    phoneNumber: '[phone]',
  }}
  value="[phone]"
  onChangeText={(text) => console.log('Phone number:', text)}
  onChangeCountry={(country) => console.log('Country:', country)}
  autoFocus={true}
  disabled={false}
  countryPickerProps={{
    withFilter: true,
    withFlag: true,
    withCountryNameButton: true,
  }}
  theme={{
    containerStyle: styles.phoneContainer,
    textInputStyle: styles.input,
    flagButtonStyle: styles.flagButton,
    codeTextStyle: styles.codeText,
    dropDownImageStyle: styles.dropDownImage,
    enableDarkTheme: false,
  }}
  hideDropdownIcon={false}
  isCallingCodeEditable={false}
/>

Props

Prop	Type	Description	Default
defaultValues	object	Default values for country code, calling code, and phone number	undefined
value	string	Controlled value for the phone number input	undefined
onChangeText	(text: string) => void	Callback when phone number changes	undefined
onChangeCountry	(country: Country) => void	Callback when selected country changes	undefined
autoFocus	boolean	Automatically focuses the input when mounted	false
disabled	boolean	Disables the input	false
countryPickerProps	CountryPickerProps	Props for the country picker modal	{}
maskInputProps	MaskInputProps	Props for the masked input component	{}
theme	Theme	Theme configuration for styling the component	{}
hideDropdownIcon	boolean	Hides the dropdown arrow icon when set to true	false
renderCustomDropdown	ReactNode	Custom component to replace the default dropdown arrow	undefined
flagProps	object	Props for customizing the country flag	{}
dropDownImageProps	ImageProps	Props for customizing the dropdown arrow image	{}
isCallingCodeEditable	boolean	Controls whether the calling code can be edited	true

Theme Properties

Property	Type	Description	Default
containerStyle	StyleProp<ViewStyle>	Style for the main container	undefined
textInputStyle	StyleProp<TextStyle>	Style for the text input	undefined
codeTextStyle	StyleProp<TextStyle>	Style for the calling code text	undefined
flagButtonStyle	StyleProp<ViewStyle>	Style for the flag button	undefined
dropDownImageStyle	StyleProp<ImageStyle>	Style for the dropdown arrow image	undefined
enableDarkTheme	boolean	Enables dark theme for the component	false

Utility Functions

isValidNumber(phoneNumber: string, countryCode: string): boolean

Validates a phone number for a specific country using Google's libphonenumber.

import { isValidNumber } from 'react-native-phone-entry';

const isValid = isValidNumber('[phone]', 'US');

Dependencies

This library depends on the following packages:

• react-native-country-picker-modal
• react-native-mask-input
• google-libphonenumber

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

TODO

• Expose ref of the input
• Add custom country picker modal

License

This project is licensed under the MIT License.

Made with create-react-native-library

Inspired by react-native-phone-number-input