https://github.com/sohantalukder/rn-phone-input-field
A React Native phone number input component with country code selection, formatting, and validation, built from scratch without external libraries. Customizable, lightweight, and user-friendly.
https://github.com/sohantalukder/rn-phone-input-field
android input input-text international ios ios-app phone phone-input phone-number react-native react-native-app react-native-component tel telephone
Last synced: 5 months ago
JSON representation
A React Native phone number input component with country code selection, formatting, and validation, built from scratch without external libraries. Customizable, lightweight, and user-friendly.
- Host: GitHub
- URL: https://github.com/sohantalukder/rn-phone-input-field
- Owner: sohantalukder
- License: mit
- Created: 2025-01-05T17:43:21.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-03-02T16:23:54.000Z (7 months ago)
- Last Synced: 2025-04-17T06:46:06.482Z (6 months ago)
- Topics: android, input, input-text, international, ios, ios-app, phone, phone-input, phone-number, react-native, react-native-app, react-native-component, tel, telephone
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/rn-phone-input-field
- Size: 1.61 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# rn-phone-input-field
`rn-phone-input-field` is a powerful and fully customizable React Native component designed for seamless phone number input, complete with a built-in country code selector and validation capabilities. It offers developers the flexibility to tailor every aspect of the component through an extensive range of props, making it adaptable to a wide variety of design and functional requirements.
One of its standout features is that it is implemented **without any dependencies**, ensuring a lightweight and performance-focused solution. This approach minimizes package bloat and allows for smooth integration into projects of any size.
## Description
`rn-phone-input-field` provides an intuitive and user-friendly way to input and validate phone numbers in React Native applications. It is designed to streamline the user experience with features like automatic country code detection, validation, and a customizable UI that fits seamlessly into any design system.
This component offers:
- **Automatic Country Code Detection**: Easily identifies the user's country code for a smooth experience.
- **Full Customization**: Modify styles, behavior, and features through props to match your application's requirements.
- **Validation Built-In**: Ensures the phone number format adheres to the selected country’s standards.
One of its key advantages is that it is built **without any dependencies**, making it lightweight and ensuring no additional bloat in your project.
With `rn-phone-input-field`, developers can effortlessly integrate a flexible, performant, and feature-rich phone number input field into their applications, improving both functionality and user experience.
## Installation
You can install `rn-phone-input-field` using either npm or yarn:
### Using npm:
```bash
npm install rn-phone-input-field
```
### Using yarn:
```bash
yarn add rn-phone-input-field
```
## Usage
Here's an example of how to use the `RNPhoneInput` component:
```javascript
import React from 'react';
import { View } from 'react-native';
import RNPhoneInput from 'rn-phone-input-field';
const MyComponent = () => {
return (
console.log(value)}
onSelectCountryCode={(value) => console.log(value)}
/>
);
};
export default MyComponent;
```
## Props
### `RNPhoneInputProps`
| Prop | Type | Description |
|----------------------|-----------------------------------------------|--------------------------------------------------------------|
| `onChangeText` | `(value: string) => void` | Callback triggered when the text input value changes. |
| `defaultCountry` | `CountryCode` | The default country code for the phone input. |
| `defaultValue` | `string` | The initial value displayed in the text input field. |
| `containerStyle` | `StyleProp` | Custom style for the container of the phone input component. |
| `placeholder` | `string` | Placeholder text displayed when the text input is empty. |
| `inputProps` | `TextInputProps` | Additional props passed to the underlying TextInput component.|
| `textInputStyle` | `StyleProp` | Custom style for the text input field. |
| `onSelectCountryCode`| `(value: Omit) => void` | Callback triggered when a country code is selected. |
| `downArrowIcon` | `React.ReactNode` | Custom React element or icon rendered as the dropdown arrow. |
| `placeholderColor` | `ColorValue` | Custom color for the placeholder text. |
| `iconContainerStyle` | `StyleProp` | Custom style for the container of the dropdown arrow icon. |
| `codeTextStyle` | `StyleProp` | Custom style for the text displaying the country code. |
## `RNPhoneInputRef`
### Methods
| Method | Type | Description |
|-------------------|---------------------------------|------------------------------------------------|
| `isValidNumber` | `(value: string) => boolean` | Validates if the given phone number is valid. |
| `onChangeText` | `(value: string) => void` | Updates the text value of the input. |
| `defaultCountry` | `(code: CountryCode) => void` | Sets the default country code. |
| `defaultValue` | `(text: string) => void` | Sets the default text value for the input. |
## License
- MIT license
## Hire
Looking for a React/React-Native Freelance Expert? Email at [mdtalukder.sohan@gmail.com](mailto:mdtalukder.sohan@gmail.com)