How to Create Country Code Phone Number in React Native?

04-Apr-2023

.

Admin

How to Create Country Code Phone Number in React Native?

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

#React Native