rn-phone-input-field
TypeScript icon, indicating that this package has built-in type declarations

1.1.9 â€Ē Public â€Ē Published

rn-phone-input-field

npm version License: MIT Downloads

PhoneInput

🚀 Ultra-Lightweight Phone Input Component

Zero Dependencies. Maximum Performance.

rn-phone-input-field is a high-performance React Native phone input component engineered for production applications that demand both functionality and minimal bundle impact. Built entirely without external dependencies, it delivers enterprise-grade features while maintaining an exceptionally small footprint.

âœĻ Key Features

  • ðŸŠķ Zero Dependencies: Completely self-contained with no external packages
  • ⚡ Ultra-Lightweight: Minimal bundle size impact on your application
  • 🌍 Comprehensive Country Support: Built-in country code database
  • ✅ Smart Validation: Real-time phone number format validation
  • ðŸŽĻ Fully Customizable: Extensive styling and configuration options
  • ðŸ“ą React Native Optimized: Native performance and platform consistency
  • 🔧 TypeScript Ready: Complete type definitions included

Why Choose rn-phone-input-field?

In an ecosystem where dependencies can quickly bloat your application, rn-phone-input-field stands out by providing full functionality without any external packages. This results in:

  • Faster app startup times
  • Reduced bundle size
  • Fewer security vulnerabilities
  • Simplified dependency management
  • Better long-term maintainability

Installation

# npm
npm install rn-phone-input-field

# yarn
yarn add rn-phone-input-field

# pnpm
pnpm add rn-phone-input-field

Quick Start

import React, { useRef } from 'react';
import { View } from 'react-native';
import { PhoneInput, PhoneInputRef } from 'rn-phone-input-field';

const App = () => {
  const phoneInputRef = useRef<PhoneInputRef>(null);

  const handlePhoneChange = (phoneNumber: string) => {
    console.log('Phone number:', phoneNumber);

    // Validate the number
    const isValid = phoneInputRef.current?.isValidNumber(phoneNumber);
    console.log('Is valid:', isValid);
  };

  return (
    <View style={{ padding: 20 }}>
      <PhoneInput
        ref={phoneInputRef}
        placeholder="Enter phone number"
        defaultCountry="US"
        onChangeText={handlePhoneChange}
        onSelectCountryCode={(country) => {
          console.log('Selected country:', country.name);
        }}
      />
    </View>
  );
};

export default App;

API Reference

PhoneInputProps

Property Type Default Description
onChangeText (value: string) => void - Callback fired when input value changes
onSelectCountryCode (country: CountryInfo) => void - Callback fired when country is selected
defaultCountry CountryCode "US" Initial country code
defaultValue string "" Initial input value
placeholder string - Input placeholder text
placeholderColor ColorValue "#999" Placeholder text color
containerStyle StyleProp<ViewStyle> - Container styling
textInputStyle StyleProp<TextStyle> - Text input styling
codeTextStyle StyleProp<TextStyle> - Country code text styling
iconContainerStyle StyleProp<ViewStyle> - Dropdown icon container styling
downArrowIcon React.ReactNode - Custom dropdown arrow component
inputProps TextInputProps - Additional TextInput props
searchInputProps TextInputProps - Country search input props

PhoneInputRef Methods

Method Type Description
isValidNumber (phoneNumber: string) => boolean Validates phone number format
onChangeText (value: string) => void Programmatically update input value
defaultCountry (code: CountryCode) => void Change default country
defaultValue (text: string) => void Set default input value

Advanced Usage

Custom Styling

<PhoneInput
  containerStyle={{
    borderWidth: 1,
    borderColor: '#e1e5e9',
    borderRadius: 8,
    paddingHorizontal: 12,
  }}
  textInputStyle={{
    fontSize: 16,
    color: '#2c3e50',
  }}
  codeTextStyle={{
    fontSize: 16,
    fontWeight: '600',
    color: '#3498db',
  }}
  placeholderColor="#95a5a6"
/>

Form Integration

import { Formik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  phone: Yup.string().required('Phone number is required'),
});

const ContactForm = () => {
  const phoneInputRef = useRef<PhoneInputRef>(null);

  return (
    <Formik
      initialValues={{ phone: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        const isValid = phoneInputRef.current?.isValidNumber(values.phone);
        if (isValid) {
          console.log('Valid phone:', values.phone);
        }
      }}
    >
      {({ handleSubmit, setFieldValue, values }) => (
        <PhoneInput
          ref={phoneInputRef}
          defaultValue={values.phone}
          onChangeText={(phone) => setFieldValue('phone', phone)}
        />
      )}
    </Formik>
  );
};

Performance Metrics

Metric rn-phone-input-field Typical Alternatives
Bundle Size ~15KB ~1-3MB
Dependencies 0 3-8 packages
Install Time Fast Slower
Security Audit Clean Potential vulnerabilities

TypeScript Support

Full TypeScript support is included out of the box with comprehensive type definitions for all props and methods.

import { PhoneInput, PhoneInputRef, CountryCode } from 'rn-phone-input-field';

Contributing

We welcome contributions! Please see our Contributing Guide for details.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support


Built with âĪïļ for the React Native community

⭐ Star this repo if you found it helpful!

Package Sidebar

Install

npm i rn-phone-input-field

Weekly Downloads

74

Version

1.1.9

License

MIT

Unpacked Size

79.3 kB

Total Files

19

Last publish

Collaborators

  • sohantalukder