Add share application feature in React Native Expo App

Enable share option in your React Native Application

Hello, React Native Developers..!!

When you use a mobile application. You always notice that there is an option to share this application somewhere in the app or when you see an interactive tweet you have the option to share the particular tweet. We are surrounded by such sharing applications. Sharing helps the company to grow customers. But as a developer, adding sharing feature to the mobile application is a good habit. Let’s check, how to add sharing feature in the application using react native application. Grab your seat, take a cup of coffee and let’s begin the hack.

Photo by Jeremy Zero on Unsplash

Basic Set-up

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

If you are adding the sharing feature then you already know how to set up react native application. But if you are a beginner, then follow the command:

In a directory, open the terminal or command prompt and start the expo project using the command: expo init SharingApp

finish the installation, and navigate to the new directory SharingApp

Code of Share feature using React Native

import { Share } from 'react-native';
const url = 'https://play.google.com/store/apps/details?id=com.instagram.android&hl=en_IN&gl=US'
  const onShare = async () => {
    try {
      const result = await Share.share({
        message:
          ('Instagram | A time wasting application'+ '\n'+ url )
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };

First, we import the required react package.

Then, we take the URL on Instagram as constant. This is a google play store URL of Instagram. After that, we made an arrow function. This arrow function should be asynchronous as we are asynchronously dealing with our app. Next, you have to set a message and add the URL link. Write this message carefully as it will be seen by the other people with whom we will do share our app. Next, we have to manage the action of the sharing. You can customize the action as per your requirements.

return (
    <View style={{ marginTop: 50 }}>
      <Button onPress={onShare} title="Share" />
    </View>
  
  );

Add the above code for UI purposes, you can customize them, according to the theme of your application.

The whole code will look something like this.

import React from 'react';
import { View, Share, Button } from 'react-native';
export default function App() {
  const url = 'https://play.google.com/store/apps/details?id=com.instagram.android&hl=en_IN&gl=US'
  const onShare = async () => {
    try {
      const result = await Share.share({
        message:
          ('Instagram | A time wasting application'+ '\n'+ url )
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };
  return (
    <View style={{ marginTop: 50 }}>
      <Button onPress={onShare} title="Share" />
    </View>
  
  );
}

Add a little bit of styling to see the project in action.

Run the application in the development server and scan the QR code with your android or IOS device, as this feature is available for both IOS as well as Android devices. When you click on the share button, you will see all the sharing options on-screen.

Well, That’s it.

If this article sounds informative then make sure to follow and share it with your geek community.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)