)
)
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:
Sharing fundraiser links to boost web donations
Sharing SMS codes to boost text donations
Sharing content on iOS and Android.
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.
Cross platform libraries.
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).
Criteria for a sharing library.
This results in the following criteria for a sharing library in React Native:
Usage of as many React Native components for sharing that have official support. This means using ActionSheetIOS
A single consistent interface for sharing across all platforms
An easy way to implement sharing in Reactative apps.
React-Native sharing.
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.
1. Usage of official sharing libraries.
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.
2. Single interface across all platforms.
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.
3. An easy way to implement sharing.
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>
Published on 11 May 2016, last updated on 7 August 2018