https://github.com/anday013/react-native-phone-entry
Simple and fully modifiable Phone Number Input Component for React Native
https://github.com/anday013/react-native-phone-entry
android component expo input ios phone-input react react-native react-native-app react-native-input react-native-otp-entry react-native-phone react-native-phone-entry react-native-phone-input react-native-web web
Last synced: 14 days ago
JSON representation
Simple and fully modifiable Phone Number Input Component for React Native
- Host: GitHub
- URL: https://github.com/anday013/react-native-phone-entry
- Owner: anday013
- License: mit
- Created: 2025-02-10T23:02:18.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-03-22T09:50:56.000Z (2 months ago)
- Last Synced: 2025-04-25T02:57:22.202Z (about 1 month ago)
- Topics: android, component, expo, input, ios, phone-input, react, react-native, react-native-app, react-native-input, react-native-otp-entry, react-native-phone, react-native-phone-entry, react-native-phone-input, react-native-web, web
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-phone-entry
- Size: 3.49 MB
- Stars: 26
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-phone-entry
[](https://badge.fury.io/js/react-native-phone-entry)
[](https://github.com/your-username/react-native-phone-entry/blob/main/LICENSE)
`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](https://github.com/anday013/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
```sh
npm install react-native-phone-entry
# or
yarn add react-native-phone-entry
```
## Usage
1. Import the PhoneInput component:
```jsx
import { PhoneInput, isValidNumber } from 'react-native-phone-entry';
```
2. Basic usage:
```jsx
export default function App() {
const [countryCode, setCountryCode] = useState < CountryCode > 'US';
return (
console.log(
'Phone number:',
text,
'isValidNumber:',
isValidNumber(text, countryCode)
)
}
onChangeCountry={(country) => {
console.log('Country:', country);
setCountryCode(country.cca2);
}}
/>
);
}
```
3. Advanced usage with customization:
```jsx
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`](https://github.com/xcarpentier/react-native-country-picker-modal#props) | Props for the country picker modal | `{}` |
| `maskInputProps` | [`MaskInputProps`](https://github.com/CaioQuirinoMedeiros/react-native-mask-input#props) | 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`](https://react.dev/reference/react/Children) | Custom component to replace the default dropdown arrow | `undefined` |
| `flagProps` | `object` | Props for customizing the country flag | `{}` |
| `dropDownImageProps` | [`ImageProps`](https://reactnative.dev/docs/image#props) | 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`](https://reactnative.dev/docs/view-style-props) | Style for the main container | `undefined` |
| `textInputStyle` | [`StyleProp`](https://reactnative.dev/docs/text-style-props) | Style for the text input | `undefined` |
| `codeTextStyle` | [`StyleProp`](https://reactnative.dev/docs/text-style-props) | Style for the calling code text | `undefined` |
| `flagButtonStyle` | [`StyleProp`](https://reactnative.dev/docs/view-style-props) | Style for the flag button | `undefined` |
| `dropDownImageStyle` | [`StyleProp`](https://reactnative.dev/docs/image-style-props) | 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.
```jsx
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](https://github.com/xcarpentier/react-native-country-picker-modal)
- [react-native-mask-input](https://github.com/CaioQuirinoMedeiros/react-native-mask-input)
- [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)
## Contributing
See the [contributing guide](CONTRIBUTING.md) 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](https://github.com/anday013/react-native-phone-entry/blob/main/LICENSE).
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
Inspired by [react-native-phone-number-input](https://github.com/garganurag893/react-native-phone-number-input)