Example of React Native Phone Number Input Get Country Code

Hello friends, We’re back with another amazing tutorial which required by almost every globally used mobile application. As we all know verifying mobile number is very important for applications because they make certain that the app is used by authenticate user. So if your application is serving content in whole world then we sometime have seen Verify via mobile number on screen. Just at left side of mobile number you have also seen Country code picker where we can pick our country and automatically its country code will be added to our number. Because all of us don’t know our country code. In react native we can use React Native Phone Number Input NPM and YARN package to add country code input picker in our app. So in this tutorial we would learn about Example of React Native Phone Number Input Get Country Code.

Contents in this project Example of React Native Phone Number Input Get Country Code :-

1. First of all we have to install the React Native Phone Number Input package in our current react native project. So open your project Root location in Command Prompt in windows and Terminal in MAC and execute below commands. I’m sharing both both NPM and YARN commands here, you can execute any of them.

or

I’m using NPM to install the package you can use any of them.

Example of React Native Phone Number Input Get Country Code

2. Now next time to start coding for app, Open your project’s main App.js file and import useState, useRef, View, Text, Alert, StyleSheet and TouchableOpacity component.

3. Import PhoneInput component from ‘react-native-phone-number-input’ package.

4. Creating our main App component.

5. Creating a State named as phoneNumber with State update method setPhoneNumber. We would use this State to store our phone number with country code.

6. Creating a reference of country code picker named as phoneInput.

7. Creating a function name as getPhoneNumber(). In this function we would simply print the entered number on screen using Alert.

8. Creating return() block, Now here we would make our main PhoneInput component and 1 Button.

9. Creating Style.

10. Complete Source Code for App.js file :-

Screenshots:-

Example of React Native Phone Number Input Get Country Code

Leave a Reply

Your email address will not be published. Required fields are marked *