In mobile applications we have seen many times there is a calling button present and when we would press that button it would open the phone numbers on mobile dial pad screen. This functionality would give us more easiness in our application and we would directly make a call from application. When we would press the button on application screen it would navigate us to mobile dial pad screen with phone number. In react native we would use the Linking library to make this possible. So in this tutorial we would Make a Phone Call – Open Phone Number in Dial Screen in react native Android iOS application.
Note: This code will not work in iOS simulator but it is working fine in real iOS device.
React Native Make a Phone Call – Open Phone Number in Dial Screen Android iOS Example:
1. Import StyleSheet, Text, View, TouchableOpacity, Linking and Platform component in your react native project’s App.js file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity, Linking, Platform } from ‘react-native’;
|
2. Create a function named as dialCall() in your main class. This function is the backbone of our project. In this function we would first use the platform component to check the device is android or ios then if device is android then store the number value in phoneNumber variable. At last we would pass the phoneNumber variable in Lining component which would open this in our dial pad screen.
tel : Open the given number in android.
telprompt : Open the given number in iOS devices.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
dialCall = () => {
let phoneNumber = ”;
if (Platform.OS === ‘android’) {
phoneNumber = ‘tel:${1234567890}’;
}
else {
phoneNumber = ‘telprompt:${1234567890}’;
}
Linking.openURL(phoneNumber);
};
|
3. Creating a button with Touchable opacity in render’s return block and call the dialCall function on button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity onPress={this.dialCall} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}>OPEN PHONE NUMBER IN DIAL SCREEN</Text>
</TouchableOpacity>
</View>
);
}
|
4. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
button: {
width: ‘80%’,
padding: 6,
backgroundColor: ‘#FF6F00’,
borderRadius: 7,
},
TextStyle: {
color: ‘#fff’,
fontSize: 18,
textAlign: ‘center’,
}
});
|
5. Complete source code for App.js file class.
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity, Linking, Platform } from ‘react-native’;
export default class mainapp extends Component {
dialCall = () => {
let phoneNumber = ”;
if (Platform.OS === ‘android’) {
phoneNumber = ‘tel:${1234567890}’;
}
else {
phoneNumber = ‘telprompt:${1234567890}’;
}
Linking.openURL(phoneNumber);
};
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity onPress={this.dialCall} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}>OPEN PHONE NUMBER IN DIAL SCREEN</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
button: {
width: ‘80%’,
padding: 6,
backgroundColor: ‘#FF6F00’,
borderRadius: 7,
},
TextStyle: {
color: ‘#fff’,
fontSize: 18,
textAlign: ‘center’,
}
});
|
Screenshots:
Also Read :
React Native Material Design Button Android iOS Example Tutorial
React Native Insert Text Input Data To MySQL Server Android iOS Tutorial
Upgrade Current Old React Native Project Version to Latest Version
React Native Animated Accordion Collapsible Expandable iOS Android Tutorial
React Native Create Alert Dialog in Android iOS Application Tutorial
