rn-phone-input-field

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.

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

License

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

Support

📧 Email: mdtalukder.sohan@gmail.com
🐛 Issues: GitHub Issues
💼 Freelance Work: Available for React/React Native projects

Built with ❤️ for the React Native community

⭐ Star this repo if you found it helpful!

Package detail