How to Share Messages to WhatsApp from Your React Native Application

In today’s digital age, integrating social sharing features into your mobile application is essential for enhancing user engagement and expanding your app’s reach. WhatsApp, with over 2 billion users worldwide, is one of the most popular messaging platforms, making it a prime candidate for integration.

In this article, we’ll explore how to implement WhatsApp sharing functionality in your React Native application. We’ll provide step-by-step guidance and updated code examples to help you:

• Share a Message: Allow users to share a predefined message directly to WhatsApp.
• Share with a Specific Contact: Enable users to send messages to specific contacts via WhatsApp.

We’ll also discuss important considerations, such as checking if WhatsApp is installed on the user’s device to ensure a seamless user experience.

Whether you’re building a new app or enhancing an existing one, adding WhatsApp sharing capabilities can significantly boost user interaction and satisfaction. Let’s dive in!

Share a Message

To share a message to WhatsApp, you can use the Linking API provided by React Native. This allows you to open WhatsApp with a predefined message.

import React from 'react';
import { Linking, Button, View, Alert } from 'react-native';
const ShareToWhatsApp = ({ text }) => {
  const shareMessage = async () => {
    const url = `whatsapp://send?text=${encodeURIComponent(text)}`;
const canOpen = await Linking.canOpenURL(url);
    if (canOpen) {
      await Linking.openURL(url);
    } else {
      Alert.alert('Error', 'WhatsApp is not installed on your device');
    }
  };
return (
    <View>
      <Button title="Share to WhatsApp" onPress={shareMessage} />
    </View>
  );
};
export default ShareToWhatsApp;

Explanation:

• Import Statements: We’re importing Linking, Button, View, and Alert from 'react-native'.
• Encoding the Text: Use encodeURIComponent(text) to encode special characters in the message.
• Checking WhatsApp Installation: Before attempting to open WhatsApp, we use Linking.canOpenURL(url) to check if WhatsApp is installed.
• Error Handling: If WhatsApp is not installed, we display an alert to inform the user.

Share a Message with a Specific Contact

To share a message with a specific contact, you’ll need the contact’s phone number in the international format, without any + or leading zeros.

import React from 'react';
import { Linking, Button, View, Alert } from 'react-native';

const ShareToWhatsAppWithContact = ({ text, phoneNumber }) => {
  const shareMessageToContact = async () => {
    const url = `whatsapp://send?text=${encodeURIComponent(text)}&phone=${phoneNumber}`;

    const canOpen = await Linking.canOpenURL(url);
    if (canOpen) {
      await Linking.openURL(url);
    } else {
      Alert.alert('Error', 'WhatsApp is not installed or the phone number is incorrect');
    }
  };

  return (
    <View>
      <Button title="Share to Contact" onPress={shareMessageToContact} />
    </View>
  );
};

export default ShareToWhatsAppWithContact;

Important Notes:

• Phone Number Format: The phone number should include the country code (e.g., 1234567890 for a US number without the +1).
• Encoding Text: Ensure the text is URL-encoded using encodeURIComponent.
• Permissions: Starting from Android 11 (API level 30), you might need to declare the QUERY_ALL_PACKAGESpermission in your AndroidManifest.xml if you're targeting Android 11 or higher.

Last Note

Check if WhatsApp is Installed

Before attempting to share a message, it’s crucial to check if WhatsApp is installed on the user’s device to prevent your app from crashing or throwing errors.

Using Linking.canOpenURL

const url = 'whatsapp://send?text=Hello';
const canOpen = await Linking.canOpenURL(url);

if (canOpen) {
  // WhatsApp is installed
  await Linking.openURL(url);
} else {
  // WhatsApp is not installed
  Alert.alert('Error', 'WhatsApp is not installed on your device');
}

Explanation:

• Linking.canOpenURL(url) returns a promise that resolves to true if the device can handle the URL, and falseotherwise.
• Always handle both cases to enhance user experience and prevent unexpected behavior.

Additional Improvements

Use of Template Literals

Utilize template literals for cleaner code when constructing URLs.

Error Handling

Always include error handling using try-catch blocks to catch any unexpected errors during the async operations.

Example with Error Handling

const shareMessage = async () => {
  const url = `whatsapp://send?text=${encodeURIComponent(text)}`;

  try {
    const canOpen = await Linking.canOpenURL(url);
    if (canOpen) {
      await Linking.openURL(url);
    } else {
      Alert.alert('Error', 'WhatsApp is not installed on your device');
    }
  } catch (error) {
    console.error('An error occurred', error);
    Alert.alert('Error', 'An unexpected error occurred');
  }
};

Accessibility

Ensure your buttons are accessible by adding accessibilityLabel.

<Button
  title="Share to WhatsApp"
  onPress={shareMessage}
  accessibilityLabel="Share this message to WhatsApp"
/>

Internationalization

If your app supports multiple languages, make sure to handle localization for button titles, alert messages, and any user-facing text.

Conclusion

By following these updated methods, you can effectively share messages to WhatsApp from your React Native application. Always remember to handle cases where WhatsApp might not be installed and to encode your messages properly.