Hi Guys,

In this example, you will learn react native country code phone number example. This post will give you simple example of how to add country code picker with phone input in react native. Here you will learn react native phone number input get country code example. we will help you to give example of how to use country code phone number in react native. Here, Creating a basic example of how to create country code phone number 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.

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...