How to Create Country Code Phone Number in React Native?

When “How to Create Country Code Phone Number in React Native?” moves through design, development and browser testing, hiring preparation process can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the React Native project before adopting it in production.

Hi Guys,

Now, let's see post of how to add a country code picker with phone input in react native. This post will give you simple example of react native phone number input get country code example. step by step explain react native country code phone number example. This article will give you simple example of how to create country code picker with phone input in react native.

Phone number authentication is widely used in mobile apps. Country code picker and OTP are important components of Phone number authentication. In this blog post, let’s see how to create a country code picker with phone number input easily in react native.

The easiest way to create a country code picker is to use any third-party library. The react native phone number input library is relatively a new library but it fits our purpose.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: Installation and Setup

You can install the library into your react native project using any of the following commands.

npm i react-native-phone-number-input --save

Step 3: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View, Alert, Pressable } from 'react-native';
import PhoneInput from 'react-native-phone-number-input';
const App = () => {
    const [phoneNumber, setPhoneNumber] = React.useState('');
    const phoneInput = React.useRef(null);
    const OnPress = () => {
        if (phoneNumber.length !==0) {
            Alert.alert(
                "Confirm Number",
                phoneNumber,
                [
                    {
                        text: "Cancel",
                        onPress: () => console.log("Cancel Pressed"),
                    },
                    { 
                        text: "OK", 
                        onPress: () => console.log("OK Pressed"),
                    },
                ],
            );
        }
    }
    return (
        <View style={styles.container}>
            <PhoneInput
                ref={phoneInput}
                defaultValue={phoneNumber}
                containerStyle={styles.phoneContainer}
                textContainerStyle={styles.textInput}
                onChangeFormattedText={text => {
                    setPhoneNumber(text);
                }}
                defaultCode="IN"
                layout='first'
                withShadow
                autoFocus
            />
            <Pressable
                style={styles.button}
                onPress={() => OnPress()}
                android_ripple="red"
            >
                <Text style={styles.text}>Send OTP</Text>
            </Pressable>
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    phoneContainer: {
        width: '75%',
        height: 50,
    },
    button: {
        marginTop: 30,
        width: '75%',
        padding: 10,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#18d4d4',
    },
    textInput: {
        paddingVertical: 0,
    },
    text: {
        color:'white',
        fontWeight:'600'
    },
});
export default App;

Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...