How to use Country Code Phone Number in React Native?

Hi Guys,

I am going to show you example of how to use country code phone number in react native. you can see react native phone number input get country code example. let’s discuss about how to create country code phone number in react native. In this article, we will implement a how to add country code picker with phone input in react native. follow bellow step for react native country code phone number example.

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.

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

expo init ExampleApp

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

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

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;

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

expo start

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

It will help you...