Social Share in React Native

We all have seen a rise in the use of social media platforms in the last couple of years, not only for building connections and making friends but also for promoting an idea and sharing success stories for personal branding to make money.

It has become significantly important for users to share their content with other applications, hence reaching a wider audience.

For quite some time I have been researching the ways to share a link, a message or an image from my react native application directly to social media platforms like Whatsapp, Facebook, Instagram, Twitter etc. This article provides a summarized approach to achieving cross-application sharing with working examples.

Using React Native’s Share Component

React Native provides an inbuilt component named ‘Share’ through which our requirements can be fulfilled. You can find the extensive documentation for this here, and a working example in this expo snack.

The above code is from the react share component documentation itself and works flawlessly on Android, iOS, and the web. Two parameters, content and options can be passed to the Share() method used on line 7. The content parameter has again three types of fields: message (string), title (string), url (string). It is compulsory to pass either a url or a message.

As you noticed, there are some limitations to using the Share component from react-native, for once there is no proper way of sharing other formats of content, specifically PDF and audio files. Also, users can’t share directly to other platforms, they have to go through a bottom modal first and then choose the application. More specific sharing like Instagram or Facebook stories is still missing from this component.

Using react-native-share package

Developed and constantly contributed to by open source developers this package provides extensive sharing from PDF files to audio files and even images. Functionalities like sharing directly to Instagram stories and Facebook feeds are built-in. You can find the full documentation of the package here and if you follow the instructions below, a working example will be available on your mobile. The documentation is a bit incomplete, the GitHub repository can be explored in that case for detailed use of functions mentioned in the documentation.

Firstly, initialize an expo app or native app on your system and start by installing the package,

npm install react-native-share

OR

yarn add react-native-share

There might occur some problems while auto-linking the library, so make sure you run the below command for manual-linking

react-native link react-native-share

This article will explore the following functionalities, sharing on other platforms can simply be done by replacing the name of the platform.

Share Image

Share Multiple Images

Share PDF

Share to Whatsapp

Share to Instagram Story

Here, image1, image2, pdfbase64 are just base64 strings representing the information contained in images, you can either replace these objects with actual base64 strings or map these images into files of your own.

I hope the knowledge I shared was helpful and enabled you to use the social share feature in your react native applications, happy coding :)