Send WhatsApp Message From React Native App Example Tutorial

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.

2. Creating our main Root export default function App(). This is our main Parent component which calls on application start.

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.

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.

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.

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.

7. Creating Style.

8. Complete Source Code for App.js file:

Screenshots:

Send WhatsApp Message From React Native App Example Tutorial Send WhatsApp Message From React Native App Example Tutorial

One Comment

  1. hii sir nice work please make tutorial on react native windows and macos app

Leave a Reply

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