@laxkar77/react-native-country-code-input

A fully controlled React Native component for phone number input with country code selection, flag display, built-in phone validation, and full UI customization.

Installation

npm install @laxkar77/react-native-country-code-input

Basic Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import { CountryCodeInput, countryData } from '@laxkar77/react-native-country-code-input';
import type { Country } from '@laxkar77/react-native-country-code-input';

export default function App() {
  const defaultCountry = countryData.find((c) => c.code === 'US')!;
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState<Country>(defaultCountry);

  return (
    <View style={{ padding: 20 }}>
      <CountryCodeInput
        value={phone}
        onChangeText={setPhone}
        selectedCountry={country}
        onSelectCountry={setCountry}
        label="Phone Number"
        placeholder="Enter phone number"
      />
    </View>
  );
}

Validation Example

import { validatePhone } from '@laxkar77/react-native-country-code-input';

const isValid = validatePhone(phone, country);
// true if phone matches the country's expected format

if (!isValid) {
  console.log('Invalid phone number for', country.name);
}

Format Phone

import { formatPhone } from '@laxkar77/react-native-country-code-input';

const full = formatPhone(country.dialCode, phone);
// e.g. "+14155551234"

Custom Styles

Use the styles prop to override any part of the component's appearance. Each key maps to a specific region of the UI.

import { CountryCodeInput } from '@laxkar77/react-native-country-code-input';
import type { CountryCodeInputStyles } from '@laxkar77/react-native-country-code-input';

const inputStyles: CountryCodeInputStyles = {
  inputWrapper: {
    borderColor: '#007AFF',
    borderRadius: 12,
    borderWidth: 2,
  },
  dialCodeText: {
    color: '#007AFF',
  },
  input: {
    color: '#1A1A1A',
    fontSize: 16,
  },
  errorText: {
    color: '#FF3B30',
    fontSize: 13,
  },
};

<CountryCodeInput
  value={phone}
  onChangeText={setPhone}
  selectedCountry={country}
  onSelectCountry={setCountry}
  styles={inputStyles}
/>

CountryCodeInputStyles keys

| Key | Type | Targets | | ---------------- | ----------- | -------------------------------------------- | | container | ViewStyle | Outer wrapper of the entire component | | label | TextStyle | Label text above the input | | inputWrapper | ViewStyle | The bordered row containing flag + input | | countrySection | ViewStyle | The flag + dial code + dropdown icon section | | dialCodeText | TextStyle | The dial code text (e.g. +1) | | input | TextStyle | The phone number TextInput | | errorText | TextStyle | Error message shown below the input |

Note: Flag rendering is always internal. Flags cannot be customized or hidden.

Custom Icons

Replace the default phone icon (☎) or dropdown arrow (▼) with any React node — your own icon component, an SVG, or an image.

import { Text } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

<CountryCodeInput
  value={phone}
  onChangeText={setPhone}
  selectedCountry={country}
  onSelectCountry={setCountry}
  renderPhoneIcon={() => (
    <MaterialIcons name="local-phone" size={20} color="#007AFF" style={{ marginRight: 8 }} />
  )}
  renderDropdownIcon={() => (
    <MaterialIcons name="keyboard-arrow-down" size={22} color="#333" />
  )}
/>

If either prop is omitted the default icon is used automatically — no visual change.

Props

| Prop | Type | Required | Default | Description | | -------------------- | ----------------------------- | -------- | ---------------- | -------------------------------------------------- | | value | string | Yes | — | Current phone number value | | onChangeText | (text: string) => void | Yes | — | Callback when the phone input changes | | selectedCountry | Country | Yes | — | Currently selected country object | | onSelectCountry | (country: Country) => void | Yes | — | Callback when a country is selected from the list | | errorMsg | string | No | — | Error message displayed below the input | | placeholder | string | No | Mobile number | TextInput placeholder text | | editable | boolean | No | true | Whether the phone input is editable | | label | string | No | — | Label text rendered above the input | | onSubmitEditing | () => void | No | — | Called when the keyboard submit button is pressed | | styles | CountryCodeInputStyles | No | — | Override styles for specific regions of the UI | | containerStyle | ViewStyle | No | — | Shorthand style override for the outer container | | labelStyle | TextStyle | No | — | Shorthand style override for the label text | | renderPhoneIcon | () => ReactNode | No | ☎ | Render a custom phone icon inside the input | | renderDropdownIcon | () => ReactNode | No | ▼ | Render a custom dropdown icon in the country area |

Country Object

interface Country {
  name: string;     // e.g. "United States"
  flag: string;     // emoji flag, e.g. "🇺🇸"
  dialCode: string; // e.g. "+1"
  code: string;     // ISO 3166-1 alpha-2, e.g. "US"
  regex: RegExp;    // validation pattern for this country's phone numbers
}

Exports

import {
  CountryCodeInput,   // The main component
  countryData,        // Array of all 239 countries
  validatePhone,      // (phone, country) => boolean
  formatPhone,        // (dialCode, phone) => string  e.g. "+919876543210"
} from '@laxkar77/react-native-country-code-input';

import type {
  Country,
  CountryCodeInputProps,
  CountryCodeInputStyles,
} from '@laxkar77/react-native-country-code-input';

License

MIT