rn-phone-input-field

🚀 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

1# npm
2npm install rn-phone-input-field
3
4# yarn
5yarn add rn-phone-input-field
6
7# pnpm
8pnpm add rn-phone-input-field

Quick Start

1import React, { useRef } from 'react';
2import { View } from 'react-native';
3import { PhoneInput, PhoneInputRef } from 'rn-phone-input-field';
4
5const App = () => {
6  const phoneInputRef = useRef<PhoneInputRef>(null);
7
8  const handlePhoneChange = (phoneNumber: string) => {
9    console.log('Phone number:', phoneNumber);
10
11    // Validate the number
12    const isValid = phoneInputRef.current?.isValidNumber(phoneNumber);
13    console.log('Is valid:', isValid);
14  };
15
16  return (
17    <View style={{ padding: 20 }}>
18      <PhoneInput
19        ref={phoneInputRef}
20        placeholder="Enter phone number"
21        defaultCountry="US"
22        onChangeText={handlePhoneChange}
23        onSelectCountryCode={(country) => {
24          console.log('Selected country:', country.name);
25        }}
26      />
27    </View>
28  );
29};
30
31export 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

1<PhoneInput
2  containerStyle={{
3    borderWidth: 1,
4    borderColor: '#e1e5e9',
5    borderRadius: 8,
6    paddingHorizontal: 12,
7  }}
8  textInputStyle={{
9    fontSize: 16,
10    color: '#2c3e50',
11  }}
12  codeTextStyle={{
13    fontSize: 16,
14    fontWeight: '600',
15    color: '#3498db',
16  }}
17  placeholderColor="#95a5a6"
18/>

Form Integration

1import { Formik } from 'formik';
2import * as Yup from 'yup';
3
4const validationSchema = Yup.object({
5  phone: Yup.string().required('Phone number is required'),
6});
7
8const ContactForm = () => {
9  const phoneInputRef = useRef<PhoneInputRef>(null);
10
11  return (
12    <Formik
13      initialValues={{ phone: '' }}
14      validationSchema={validationSchema}
15      onSubmit={(values) => {
16        const isValid = phoneInputRef.current?.isValidNumber(values.phone);
17        if (isValid) {
18          console.log('Valid phone:', values.phone);
19        }
20      }}
21    >
22      {({ handleSubmit, setFieldValue, values }) => (
23        <PhoneInput
24          ref={phoneInputRef}
25          defaultValue={values.phone}
26          onChangeText={(phone) => setFieldValue('phone', phone)}
27        />
28      )}
29    </Formik>
30  );
31};

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.

1import { 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

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

---