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.
|
1
|
npm i react–native–phone–number–input —save
|
or
|
1
|
yarn add react–native–phone–number–input
|
I’m using NPM to install the package you can use any of them.
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.
|
1
2
3
|
import React, {useState, useRef} from ‘react’;
import { View, Text, Alert, StyleSheet, TouchableOpacity } from ‘react-native’;
|
3. Import PhoneInput component from ‘react-native-phone-number-input’ package.
|
1
|
import PhoneInput from ‘react-native-phone-number-input’;
|
4. Creating our main App component.
|
1
2
3
4
5
|
export default function App() {
}
|
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.
|
1
|
const [phoneNumber, setPhoneNumber] = useState(”);
|
6. Creating a reference of country code picker named as phoneInput.
|
1
|
const phoneInput = useRef(null);
|
7. Creating a function name as getPhoneNumber(). In this function we would simply print the entered number on screen using Alert.
|
1
2
3
|
const getPhoneNumber = () => {
Alert.alert(phoneNumber);
};
|
8. Creating return() block, Now here we would make our main PhoneInput component and 1 Button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
return (
<View style={styleSheet.MainContainer}>
<Text style={styleSheet.heading}> Example of React Native Phone Number Input </Text>
<PhoneInput
ref={phoneInput}
defaultValue={phoneNumber}
defaultCode=“IN”
layout=“first”
withShadow
autoFocus
containerStyle={styleSheet.phoneNumberView}
textContainerStyle={{ paddingVertical: 0 }}
onChangeFormattedText={text => {
setPhoneNumber(text);
}}
/>
<TouchableOpacity style={styleSheet.button} onPress={() => getPhoneNumber()}>
<Text style={styleSheet.buttonText}>Get Phone Number</Text>
</TouchableOpacity >
</View>
);
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
heading:{
fontSize: 24,
textAlign: ‘center’,
paddingBottom: 20,
color: ‘black’
},
phoneNumberView: {
width: ‘80%’,
height: 50,
backgroundColor: ‘white’
},
button: {
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: 25,
width: ‘80%’,
padding: 8,
backgroundColor: ‘#00B8D4’,
},
buttonText:{
fontSize: 20,
textAlign: ‘center’,
color: ‘white’
}
});
|
10. Complete Source Code for App.js file :-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import React, {useState, useRef} from ‘react’;
import { View, Text, Alert, StyleSheet, TouchableOpacity } from ‘react-native’;
import PhoneInput from ‘react-native-phone-number-input’;
export default function App() {
const [phoneNumber, setPhoneNumber] = useState(”);
const phoneInput = useRef(null);
const getPhoneNumber = () => {
Alert.alert(phoneNumber);
};
return (
<View style={styleSheet.MainContainer}>
<Text style={styleSheet.heading}> Example of React Native Phone Number Input </Text>
<PhoneInput
ref={phoneInput}
defaultValue={phoneNumber}
defaultCode=“IN”
layout=“first”
withShadow
autoFocus
containerStyle={styleSheet.phoneNumberView}
textContainerStyle={{ paddingVertical: 0 }}
onChangeFormattedText={text => {
setPhoneNumber(text);
}}
/>
<TouchableOpacity style={styleSheet.button} onPress={() => getPhoneNumber()}>
<Text style={styleSheet.buttonText}>Get Phone Number</Text>
</TouchableOpacity >
</View>
);
};
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
heading:{
fontSize: 24,
textAlign: ‘center’,
paddingBottom: 20,
color: ‘black’
},
phoneNumberView: {
width: ‘80%’,
height: 50,
backgroundColor: ‘white’
},
button: {
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: 25,
width: ‘80%’,
padding: 8,
backgroundColor: ‘#00B8D4’,
},
buttonText:{
fontSize: 20,
textAlign: ‘center’,
color: ‘white’
}
});
|
Screenshots:-
Also Read :
Create Horizontal ScrollView in React Native Tutorial Android iOS
How to change Image border width in React Native Tutorial
React Native Copy Text to Clipboard Android iOS Example
React Native Open Specific App in Google Play Store from App in Android
CRUD Operations on SQLite Database in React Native Example
