Sharing Content With React-Native

React Native has great support for iOS. For sharing, you get functionality provided to you via ActionSheetIOS, which is a part of React Native. This allows you to launch a native share sheet on iOS. At the time of writing, there is no official support for sharing on Android. This means that in order to share on Android you either have to implement it yourself, or use an open
source library. Of course, official support will come to Android with time.

The ideal library would be a cross platform one that bridges the interfaces of both iOS and Android. This would result in a single interface and a single library. Some cross platform libraries already exist.

There are multiple cross platform libraries for sharing. One example is react-native-share, which provides functionality to share across platforms. However, upon use we have found that these often have custom implementations for both platforms. This increases the number of steps for setup and results in more places the code can go wrong. It is much better to bridge the interfaces of ActionSheetIOS for iOS and a custom implementation for Android (at least until official support arrives).

This results in the following criteria for a sharing library in React Native:

1. Usage of as many React Native components for sharing that have official support. This means using ActionSheetIOS
2. A single consistent interface for sharing across all platforms
3. An easy way to implement sharing in Reactative apps.

Due to our criteria not being met by any existing library, we started building our own library – react-native-sharing. We then worked on meeting the criteria that we wanted in a sharing library.

We made sure to use ActionSheetIOS (part of react-native) for iOS. For Android, as previously mentioned, there is no official support – so we will have to implement this natively. We will then have to add a Javascript bridge over the top with a single interface.

After looking at the implementation of ActionSheetIOS and sharing in Android, we extracted a consistent interface between the two:

• Subject (required) – Shown above the sharing options and used in emails as the subject.
• Message (required) – The message that will be shared.
• URL (optional) – A link that will be added to the end of the message and used to help display more relevant sharing options.

In react-native-sharing we have provided multiple ways to share. These are:

– Calling the share function directly:

share(subject, message, url)

– Wrapping the views you want to trigger sharing on touch with ShareLink. This will automatically trigger the sharing functionality when any of its subviews are touched:

<ShareLink subject="Do you know 3SC?" message="Check out 3SC" url="https://3sidedcube.com/">
<Text>Tell your friends about 3 Sided Cube</Text>
</ShareLink>