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.

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

1. Import the PhoneInput component:

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

2. 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);
      }}
    />
  );
}

3. Advanced usage with customization:

<PhoneInput
  defaultValues={{
    countryCode: 'US',
    callingCode: '+1',
    phoneNumber: '+123456789',
  }}
  value="+123456789"
  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('+1234567890', '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