Skip to main content

Quick Start

The shortest path to a working international phone input:

import React, {useState} from 'react';
import {Text, View} from 'react-native';
import PhoneInput, {ICountry} from 'rn-international-phone-number';

export default function App() {
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState<ICountry | null>(null);

  return (
    <View style={{width: '100%', flex: 1, padding: 24}}>
      <PhoneInput
        value={phone}
        onChangePhoneNumber={setPhone}
        country={country}
        onChangeCountry={setCountry}
      />

      <Text style={{marginTop: 12}}>
        {`Country: ${country?.name?.common || '-'}
National: ${phone}`}
      </Text>
    </View>
  );
}

That's it. The component handles formatting, country selection, and validation automatically.

What next?​