How to Build a Phone Number Input with a Country Picker Modal for React Native Application?

The react-native-phone-input component enables a convenient method for entering and processing phone numbers in a mobile application. Included in the functionality are phone number formatting, presentation of flags, validation, configurable country lists, selection of country codes, and much more. Phone number input with a country picker is an essential feature in many mobile applications to ensure the user enters correct contact information.

Steps to Add Phone Number Input with Country Picker Modal for React Native App:

Step 1: Install Phone Input Package

Install the package via npm or yarn.

Using npm:

npm install react-native-phone-input

Using yarn:

yarn add react-native-phone-input

Step 2: Install Country Picker Modal Package

Install the package via npm or yarn.

Using npm:

npm install react-native-country-picker-modal

Using yarn:

yarn add react-native-country-picker-modal

React-native-country-picker-modal is a component library for React Native that provides a dialog modal to select a country from a list. The component comes with features such as selecting the country from the list, searching for a country, modal configuration for displaying, rendering country names in the varied languages, etc.

iOS Set up

Reinstall pod with

cd ios && pod install && cd ..

Example:

import React, {useState,useRef} from 'react';
import  CountryPicker, {CountryCode} from 'react-native-country-picker-modal';
import PhoneInput from 'react-native-phone-input'
const [phoneCountryCode, setPhoneCountryCode] = useState<CountryCode>('FR'); 
 const [showPhoneCountryPicker, setShowPhoneCountryPicker] = useState(false);
 const [phoneNumber, setPhoneNumber] = useState("");
 const phoneInput = useRef<PhoneInput>(null);
const handleCountrySelect = (country:any) => {
    setPhoneCountryCode(country.cca2);
    const newPhoneNumber = `+${country.callingCode[0]}`;
    setPhoneNumber(newPhoneNumber);
    if (phoneInput.current) {
      phoneInput.current.selectCountry(country.cca2.toLowerCase());
      phoneInput.current.setValue(newPhoneNumber);
    }
    setShowPhoneCountryPicker(false);
  };
const App = () => {
  return (
    <View>
 <PhoneInput
              ref={phoneInput}
              style={styles.input}
              initialValue={phoneNumber} 
              initialCountry={phoneCountryCode.toLowerCase()}
              onPressFlag={() => setShowPhoneCountryPicker(true)}
              onChangePhoneNumber={(text) => {
                setPhoneNumber(text);
              }}
            />
            <CountryPicker
              countryCode={phoneCountryCode}
              visible={showPhoneCountryPicker}
              onSelect={
                handleCountrySelect
            }
              onClose={ ()=>setShowPhoneCountryPicker(false)}
              withFlagButton={false}
              withFilter
            /> 
    </View>
  );
};
export default App

Conclusion

In a few lines of code, we generated a phone input within a country modal picker for a React Native app. With this implementation, once users begin typing in their phone numbers can choose their country code quickly, enhancing UX and validation.

Happy Coding!