How do you share content across platforms using React-Native? We dive into into this space and look at content sharing across iOS and Android. Including sharing libraries, platform interfaces and implementation. This is how you share content on React-Native.
The last blog post by Simon talked about how we are displaying content to the user. In CharityKit, we want to enable users to easily share key pieces of information about their fundraisers to other apps so that they can reach their goals. Examples of these are:
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:
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.
After looking at the implementation of ActionSheetIOS and sharing in Android, we extracted a consistent interface between the two:
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>
Published on May 11, 2016, last updated on August 7, 2018