React-native-phone-entry NPM

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.

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: '+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:

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

react-native ios android

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

0.2.1

4 months ago

0.2.0

4 months ago

0.1.0

4 months ago