Linking API in react native is used to interact between both incoming and outgoing Links. Using the Linking API we can easily send data between our react native application and any other application by giving a certified link. We would use the Package name to interact between application and using a fix syntax we can navigate to another application with data in it. In this tutorial we are using the React Native Hooks syntax. We would first create Two Text Input components one for providing the WhatsApp number another for proving the Message. Now when use clicks on the button it will simply open the entered number in WhatsApp application. If WhatsApp application is not installed in your mobile phone then it will show us a error message on screen that WhatsApp is not installed on your mobile. So in this tutorial we would Send WhatsApp Message From React Native App Android iOS Example Tutorial.
Contents in this project Send WhatsApp Message From React Native App Android iOS Example Tutorial:
1. Open your project’s main App.js file and import useState, useEffect and Alert, View, StyleSheet, Text, Linking, TextInput, TouchableOpacity components.
|
1
2
3
|
import React, { useState, useEffect } from ‘react’;
import { Alert, View, StyleSheet, Text, Linking, TextInput, TouchableOpacity } from ‘react-native’;
|
2. Creating our main Root export default function App(). This is our main Parent component which calls on application start.
|
1
2
3
4
5
|
export default function App() {
}
|
3. Creating a State named as cellNumber with State value change method setCellNumber. We would use this State to store the Mobile Number entered by user.
|
1
|
const [cellNumber, setCellNumber] = useState(”);
|
4. Creating another State named as whatsAppMessage with State value change method setWhatsAppMessage. We would use this State to store the Text message which we want to share on WhatsApp application.
|
1
|
const [whatsAppMessage, setWhatsAppMessage] = useState();
|
5. Creating a function named as sendMsg(). In this function we would use the Linking API to send data from our react native application to WhatsApp application. First we would check whether the entered number is equal to 10 digit mobile number. We would call this function on Touchable Opacity button click event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const sendMsg = () => {
if (cellNumber.length != 10) {
Alert.alert(‘Please Enter Correct WhatsApp Number’);
return;
}
// Here we are using 91 which is India Country Code.
// You can change country code.
let URL = ‘whatsapp://send?text=’ + whatsAppMessage + ‘&phone=91’ + cellNumber;
Linking.openURL(URL)
.then((data) => {
console.log(‘WhatsApp Opened’);
})
.catch(() => {
Alert.alert(‘Make sure Whatsapp installed on your device’);
});
};
|
6. Creating the Return() block. Here we would make 1 Text component to show the application Title, 2 Text Input component to get mobile number and text message form user and 1 Touchable Opacity 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
25
26
27
28
29
30
31
32
33
34
35
|
return (
<View style={styleSheet.MainContainer}>
<Text style={styleSheet.text1}>Send WhatsApp Message from React Native App</Text>
<TextInput
value={whatsAppMessage}
onChangeText={
(whatsAppMessage) => setWhatsAppMessage(whatsAppMessage)
}
placeholder={‘Enter WhatsApp Message Here’}
style={styleSheet.textInputStyle}
/>
<TextInput
value={cellNumber}
onChangeText={
(cellNumber) => setCellNumber(cellNumber)
}
placeholder={‘Enter WhatsApp Number Here’}
keyboardType=“numeric”
style={styleSheet.textInputStyle}
/>
<TouchableOpacity
activeOpacity={0.7}
style={styleSheet.button}
onPress={sendMsg}>
<Text style={styleSheet.buttonText}> Click Here To Send WhatsApp Message </Text>
</TouchableOpacity>
</View>
);
|
7. 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
37
38
39
40
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FAFAFA’,
padding: 10
},
text1: {
fontSize: 20,
textAlign: ‘center’,
fontWeight: ‘bold’,
},
textInputStyle: {
height: 42,
borderColor: ‘blue’,
borderWidth: 1,
width: ‘100%’,
paddingHorizontal: 10,
marginTop: 20
},
button: {
justifyContent: ‘center’,
marginTop: 18,
padding: 12,
backgroundColor: ‘#00B8D4’,
},
buttonText: {
color: ‘#fff’,
textAlign: ‘center’,
fontWeight: ‘bold’,
},
});
|
8. 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
106
|
import React, { useState, useEffect } from ‘react’;
import { Alert, View, StyleSheet, Text, Linking, TextInput, TouchableOpacity } from ‘react-native’;
export default function App() {
const [cellNumber, setCellNumber] = useState(”);
const [whatsAppMessage, setWhatsAppMessage] = useState();
const sendMsg = () => {
if (cellNumber.length != 10) {
Alert.alert(‘Please Enter Correct WhatsApp Number’);
return;
}
// Here we are using 91 which is India Country Code.
// You can change country code.
let URL = ‘whatsapp://send?text=’ + whatsAppMessage + ‘&phone=91’ + cellNumber;
Linking.openURL(URL)
.then((data) => {
console.log(‘WhatsApp Opened’);
})
.catch(() => {
Alert.alert(‘Make sure Whatsapp installed on your device’);
});
};
return (
<View style={styleSheet.MainContainer}>
<Text style={styleSheet.text1}>Send WhatsApp Message from React Native App</Text>
<TextInput
value={whatsAppMessage}
onChangeText={
(whatsAppMessage) => setWhatsAppMessage(whatsAppMessage)
}
placeholder={‘Enter WhatsApp Message Here’}
style={styleSheet.textInputStyle}
/>
<TextInput
value={cellNumber}
onChangeText={
(cellNumber) => setCellNumber(cellNumber)
}
placeholder={‘Enter WhatsApp Number Here’}
keyboardType=“numeric”
style={styleSheet.textInputStyle}
/>
<TouchableOpacity
activeOpacity={0.7}
style={styleSheet.button}
onPress={sendMsg}>
<Text style={styleSheet.buttonText}> Click Here To Send WhatsApp Message </Text>
</TouchableOpacity>
</View>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FAFAFA’,
padding: 10
},
text1: {
fontSize: 20,
textAlign: ‘center’,
fontWeight: ‘bold’,
},
textInputStyle: {
height: 42,
borderColor: ‘blue’,
borderWidth: 1,
width: ‘100%’,
paddingHorizontal: 10,
marginTop: 20
},
button: {
justifyContent: ‘center’,
marginTop: 18,
padding: 12,
backgroundColor: ‘#00B8D4’,
},
buttonText: {
color: ‘#fff’,
textAlign: ‘center’,
fontWeight: ‘bold’,
},
});
|
Screenshots:
Also Read :
How to Update NPM to Latest Version in MAC OS React Native
React Native Solve Unrecognized Font Family Material Design Icons Error in iOS MAC
React Native Share API example to Share TextInput message from App
Create and Call State in Functional Component in React Native Hooks
React Native Highlight Some Text Within Text String Yellow Color
