Home » React-native » Open WhatsApp chatbox from React-native

Open WhatsApp chatbox from React-native

Pro Level React-native

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

Open WhatsApp chatbox from React-nativeOpen WhatsApp chatbox from React-native

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 🙂Open WhatsApp chatbox from React-native

Thank you 🙂

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *