Welcome friends, Today we would learn about a new react native NPM package named as React Native Communications. As we all know that in react native there are some functionalities which we cannot perform using native code. So to perform that type of functionality we have use the external NPM packages in our react native project. Today we are using NPM package to execute 4 types of different functionalities like Dialing call from react native android iOS app, Sending E-Mail from react native app, Sending SMS from react native app and Open given link in mobile default web browser. The React Native Communications library gives us easy to use inbuilt methods to perform this type of setup. So in this tutorial we would learn about React Native Communications Dial Call, Send E-Mail, Send SMS and Open link in web browser Android iOS Example.
Contents in this project React Native Communications – Android iOS Example :-
1. The first step is to download and install the React Native Communications package in your react native application. To download and install this package in your project open your project’s main Root directory in Command Prompt or Terminal and execute below command.
|
1
|
npm install react–native–communications
|
Screenshot:-
Screenshot after done installation:
2. After successfully done installation, next step is to start coding for the app. So open your project’s main App.js file and import View, StyleSheet, TouchableOpacity and Text component.
|
1
2
3
|
import React from ‘react’;
import { View, StyleSheet, TouchableOpacity, Text } from ‘react-native’;
|
3. Now we have to import the Communications component from ‘react-native-communications’ package.
|
1
|
import Communications from ‘react-native-communications’;
|
4. Creating our main export default functional component App.
|
1
2
3
4
|
export default function App() {
}
|
5. Creating a function named as dialCall(). In this function we would call the Communications.phonecall() method to dial a call from react native application.
|
1
2
3
4
5
|
const dialCall = () => {
Communications.phonecall(‘0123456789’, true);
}
|
6. Creating a function named as sendEmail(). In this function we would call the Communications.email() method to send mail directly from our react native application. All the data we would pass in this method will be automatically filled into our G-Mail mail sending window.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const sendEmail = () => {
/* Mail: email(to, cc, bcc, subject, body) */
Communications.email(
[
],
null,
null,
‘Write Mail Subject Here…’,
‘Write Mail Content Here…’,
);
}
|
7. Creating a function named as sendSMS(). In this method we would call the Communications.text() method to send SMS from react native app.
|
1
2
3
4
5
6
7
8
|
const sendSMS = () => {
Communications.text(
‘0123456789’,
‘Follow My Website https://reactnativecode.com’
);
}
|
8. Creating another function named as openLink(). In this function we would call the Communications.web() method to open given website link from app into your mobile’s web browser.
|
1
2
3
4
5
|
const openLink = () => {
Communications.web(‘https://reactnativecode.com’) ;
}
|
9. Creating return() block. Now here we would make 1 Root View component -> 4 Touchable Opacity button . We would call each function on each button click event.
|
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
|
return (
<View style={styleSheet.MainContainer}>
<Text style={{ textAlign: ‘center’, fontSize: 24 }}> React Native Communications </Text>
<TouchableOpacity onPress={dialCall} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> DIAL CALL / MAKE PHONE CALL </Text>
</TouchableOpacity>
<TouchableOpacity onPress={sendEmail} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> SEND EMAIL FROM APP </Text>
</TouchableOpacity>
<TouchableOpacity onPress={sendSMS} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> SEND SMS FROM APP </Text>
</TouchableOpacity>
<TouchableOpacity onPress={openLink} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> OPEN LINK IN BROWSER </Text>
</TouchableOpacity>
</View>
);
|
10. 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
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FAFAFA’,
padding: 10
},
button: {
width: ‘80%’,
paddingTop: 7,
paddingBottom: 7,
backgroundColor: ‘#00B8D4’,
borderRadius: 5,
marginTop: 10
},
TextStyle: {
color: ‘#fff’,
textAlign: ‘center’,
fontWeight: ‘bold’
}
});
|
11. 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import React from ‘react’;
import { View, StyleSheet, TouchableOpacity, Text } from ‘react-native’;
import Communications from ‘react-native-communications’;
export default function App() {
const dialCall = () => {
Communications.phonecall(‘0123456789’, true);
}
const sendEmail = () => {
/* Mail: email(to, cc, bcc, subject, body) */
Communications.email(
[
],
null,
null,
‘Write Mail Subject Here…’,
‘Write Mail Content Here…’,
);
}
const sendSMS = () => {
Communications.text(
‘0123456789’,
‘Follow My Website https://reactnativecode.com’
);
}
const openLink = () => {
Communications.web(‘https://reactnativecode.com’) ;
}
return (
<View style={styleSheet.MainContainer}>
<Text style={{ textAlign: ‘center’, fontSize: 24 }}> React Native Communications </Text>
<TouchableOpacity onPress={dialCall} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> DIAL CALL / MAKE PHONE CALL </Text>
</TouchableOpacity>
<TouchableOpacity onPress={sendEmail} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> SEND EMAIL FROM APP </Text>
</TouchableOpacity>
<TouchableOpacity onPress={sendSMS} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> SEND SMS FROM APP </Text>
</TouchableOpacity>
<TouchableOpacity onPress={openLink} activeOpacity={0.6} style={styleSheet.button} >
<Text style={styleSheet.TextStyle}> OPEN LINK IN BROWSER </Text>
</TouchableOpacity>
</View>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FAFAFA’,
padding: 10
},
button: {
width: ‘80%’,
paddingTop: 7,
paddingBottom: 7,
backgroundColor: ‘#00B8D4’,
borderRadius: 5,
marginTop: 10
},
TextStyle: {
color: ‘#fff’,
textAlign: ‘center’,
fontWeight: ‘bold’
}
});
|
Screenshots:-
Also Read :
Add Rounded Corner Borders to Text Input in React Native Android iOS
Remote Debugger is in a Background Tab which may cause apps to perform Slowly React Native
React Native Material Bottom Navigation View for Android iOS Example
React Native Rotate Image View Using Animation Android iOS Tutorial
React Native Create Disabled Button State Using TouchableOpacity
