Open In App

How to Add Phone Number Input in React Native ?

Last Updated : 25 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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:

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

React-Native-Project-Structure.png

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:

How-to-Add-Phone-Number-Input-in-React-Native.gif



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads