How to Add Phone Number Input in React Native ?

React Native is a JavaScript framework for cross-platform mobile app development. In this article, we’ll see how to add a phone number input field in a React Native app using Expo CLI.

​Adding a phone number input field in React Native is helpful for collecting user phone numbers during registration or login. It typically consists of a text input component and can include a country picker for selecting the country code.

Pre-requisites:

• Introduction to React Native
• Introduction React Native Components
• React Native State
• React Native Props
• Expo CLI
• Node.js and npm (Node Package Manager)

Steps to install & configure React Native

Step 1: Set Up the Development Environment

To start, install Expo CLI globally on your system by running this terminal command:

npm install -g expo-cli​

Step 2: Create React Native Application With Expo CLI

Create a new React Native project with Expo CLI using this terminal command:

expo init input-phone 

Step 3: ​Navigate to the project directory by using this command:

cd input-phone

Project Structure

Step 4: Install Required Dependencies

Install the necessary dependencies for the phone number input functionality in the project directory using this command:

npm install react-native-country-picker-modal react-native-phone-input

Install ​react-native-country-picker-modal or the country picker and react-native-phone-input for the phone number input field.

Approach

To add a phone number input in React Native, set up a new project using Expo CLI, install required dependencies, implement the PhoneInput component for input handling and the CountryPicker component for country selection, customize styling, and test the functionality using Expo CLI.

Example: In this example, One input and two buttons​ the first button is used to select the country code for submission and the second button is used to submit the input.

• App.js

Javascript

import React, { useState } from 'react';
import { View,
         TextInput,
         Button,
         Alert,
         StyleSheet } from 'react-native';
import PhoneInput
    from 'react-native-phone-input';
import CountryPicker
    from 'react-native-country-picker-modal';

const YourComponent = () => {
    const [phoneNumber, setPhoneNumber] = useState('');
    const [countryCode, setCountryCode] = useState('');
    const [selectedCountry, setSelectedCountry] =
        useState(null);
    const [countryPickerVisible, setCountryPickerVisible] =
        useState(false);

    const onSelectCountry = (country) => {
        setCountryCode(country.cca2);
        setSelectedCountry(country);
        setCountryPickerVisible(false);
    };

    const onSubmit = () => {

        // Perform your desired action with
        // the phone number and country code
        Alert.alert('Form Submitted',
            `Phone Number: ${phoneNumber}
                    \nCountry Code: ${countryCode}`);
    };

    const toggleCountryPicker = () => {
        setCountryPickerVisible(!countryPickerVisible);
    };

    return (
        <View style={styles.container}>
            <PhoneInput
                value={phoneNumber}
                onChangePhoneNumber={(number) => setPhoneNumber(number)}
                onPressFlag={toggleCountryPicker}
                style={styles.phoneInput}
            />
            <Button
                title=
                {selectedCountry ? selectedCountry.name : 'Select Country'}
                onPress={toggleCountryPicker}
                style={styles.countryButton}
            />
            {countryPickerVisible && (
                <CountryPicker
                    withFilter={true}
                    withFlagButton={false}
                    withCountryNameButton={false}
                    onSelect={onSelectCountry}
                    onClose={() => setCountryPickerVisible(false)}
                    visible={countryPickerVisible}
                    containerButtonStyle={styles.countryPickerButton}
                    closeButtonImageStyle={styles.countryPickerCloseButton}
                />
            )}
            <Button title="Submit"
                onPress={onSubmit}
                style={styles.submitButton} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 20,
    },
    phoneInput: {
        height: 50,
        width: '100%',
        borderWidth: 1,
        borderColor: '#ccc',
        marginBottom: 20,
        paddingHorizontal: 10,
    },
    countryButton: {
        marginBottom: 20,
    },
    countryPickerButton: {
        borderRadius: 5,
        backgroundColor: '#fff',
        marginBottom: 20,
    },
    countryPickerCloseButton: {
        width: 20,
        height: 20,
    },
    submitButton: {
        width: '100%',
    },
});

export default YourComponent;

​Step 6: To run the react native application, open the Terminal and enter the command listed below. 

npx expo start

• To run on Android:

npx react-native run-android

• To run on Ios:

npx react-native run-ios

Output: