1.0.1 • Published 4 months ago

rn-phone-input-field v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

rn-phone-input-field

RNPhoneInput

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:

npm install rn-phone-input-field

Using yarn:

yarn add rn-phone-input-field

Usage

Here's an example of how to use the RNPhoneInput component:

import React from 'react';
import { View } from 'react-native';
import RNPhoneInput from 'rn-phone-input-field';

const MyComponent = () => {
  return (
    <View>
      <RNPhoneInput
        placeholder="Enter your phone number"
        onChangeText={(value) => console.log(value)}
        onSelectCountryCode={(value) => console.log(value)}
      />
    </View>
  );
};

export default MyComponent;

Props

RNPhoneInputProps

PropTypeDescription
onChangeText(value: string) => voidCallback triggered when the text input value changes.
defaultCountryCountryCodeThe default country code for the phone input.
defaultValuestringThe initial value displayed in the text input field.
containerStyleStyleProp<ViewStyle>Custom style for the container of the phone input component.
placeholderstringPlaceholder text displayed when the text input is empty.
inputPropsTextInputPropsAdditional props passed to the underlying TextInput component.
textInputStyleStyleProp<TextStyle>Custom style for the text input field.
onSelectCountryCode(value: Omit<EachCountry, 'countryCode', 'callingCode'>) => voidCallback triggered when a country code is selected.
downArrowIconReact.ReactNodeCustom React element or icon rendered as the dropdown arrow.
placeholderColorColorValueCustom color for the placeholder text.
iconContainerStyleStyleProp<ViewStyle>Custom style for the container of the dropdown arrow icon.
codeTextStyleStyleProp<TextStyle>Custom style for the text displaying the country code.

RNPhoneInputRef

Methods

MethodTypeDescription
isValidNumber(value: string) => booleanValidates if the given phone number is valid.
onChangeText(value: string) => voidUpdates the text value of the input.
defaultCountry(code: CountryCode) => voidSets the default country code.
defaultValue(text: string) => voidSets the default text value for the input.

License

License

  • MIT license

Hire

Looking for a React/React-Native Freelance Expert? Email at mdtalukder.sohan@gmail.com