Hi Guys, In this article, we are going to learn about How to open WhatsApp chatbox from React-native, Many time developers want to give some feedback, complaint token, from the client for that client can send an email and another way is to provide WhatsApp number for some queries, for this we are using Linking components from React-native core libraries, which allows you to open WhatsApp chatbox for particular number with a text message, so let’s start with an example
1. Create a new project
react-native init projectName
2. Import the following components
import React, { Component } from "react"; import { View, StyleSheet, Text, TextInput, Button, Linking, } from "react-native";
3. Open WhatsApp from React-native App
let url = "whatsapp://send?text=" + this.state.message + "&phone=91" + this.state.mobileNo; Linking.openURL(url) .then(data => { console.log("WhatsApp Opened successfully " + data); //<---Success }) .catch(() => { alert("Make sure WhatsApp installed on your device"); //<---Error });
As you see in the above code, I have created a URL with the text message and telephone number and pass this URL in Linking.openURL(url) this call will return response success or catch the error
4. Full source code
In below code, I have added to TextInput component one for Message and another for Number, define these two var in the constructor state and call method to open WhatsApp chatbox also I have added validation on button click ti check whether message and number is not null, it will throw an error so validation is important in this situation
import React, { Component } from "react"; import { View, StyleSheet, Text, TextInput, Button, Linking, } from "react-native"; export default class App extends Component { constructor(props) { super(props); this.state = { mobileNo: "", message: "" }; } openWhatsApp = () => { let msg = this.state.message; let mobile = this.state.mobileNo; if (mobile) { if (msg) { let url = "whatsapp://send?text=" + this.state.message + "&phone=91" + this.state.mobileNo; Linking.openURL(url) .then(data => { console.log("WhatsApp Opened successfully " + data); }) .catch(() => { alert("Make sure WhatsApp installed on your device"); }); } else { alert("Please enter message to send"); } } else { alert("Please enter mobile no"); } }; render() { return ( <View style={styles.container}> <Text style={{ textAlign: "center", fontSize: 20, paddingVertical: 30 }} > Open WhatsApp chat box from React-native App </Text> <TextInput value={this.state.message} onChangeText={message => this.setState({ message })} placeholder={"Enter message"} multiline={true} style={[styles.input, { height: 90 }]} /> <TextInput value={this.state.mobileNo} onChangeText={mobileNo => this.setState({ mobileNo })} placeholder={"Enter Mobile"} style={styles.input} keyboardType={"numeric"} /> <View style={{ marginTop: 20 }}> <Button onPress={this.openWhatsApp} title="Open WhatsApp message" /> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", padding: 30, backgroundColor: "#ffffff" }, input: { width: 255, height: 44, padding: 10, margin: 10, backgroundColor: "#FFF", borderColor: "#000", borderRadius: 0.5, borderWidth: 0.5 } });
5. Output
Thank you 🙂