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:

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

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<ViewStyle>	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<TextStyle>	Custom style for the text input field.
onSelectCountryCode	(value: Omit<EachCountry, 'countryCode', 'callingCode'>) => 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<ViewStyle>	Custom style for the container of the dropdown arrow icon.
codeTextStyle	StyleProp<TextStyle>	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 [e-mail]