Almost all apps can take advantage of share features offered by iOS and Android. This can be useful to:

• Allow the user to share his activity. For example, the Uber app allows the users to share their estimated time of arrival.
• Offer an easy way for the user to tell his friends about the app.
• Share products, items or pages inside the app. Recently, Tinder added a "Recommend" button on the user profiles, to share someone's profile page with a friend that could be interested. Marketplace apps may use sharing features to allow the user to quickly send the page of a product to someone else.

Some apps or games can have deeper integration with social media, helping the app/game to grow a community.

Let's see how we can use these sharing features with React Native.

React Native's Share API

The easiest way to add sharing to your app is to use React Native Share API. No new module to install, React Native is now battery-included here!

The API is pretty simple and self explaining:

++pre>++code>import { Share } from 'react-native';


onClick() {
 Share.share({
   message: 'BAM: we\'re helping your business with awesome React Native apps',
   url: 'http://bam.tech',
   title: 'Wow, did you see that?'
 }, {
   // Android only:
   dialogTitle: 'Share BAM goodness',
   // iOS only:
   excludedActivityTypes: [
     'com.apple.UIKit.activity.PostToTwitter'
   ]
 })
}

++/code>++/pre>

If you want to make the sharing look clean and polished, don't miss the chance to specify the dialog title on Android with ++code>dialogTitle++/code>.

On iOS, you can also know if the user really shared the content by inspecting the result of the promise, which is either ++code>Share.dismissedAction++/code> (user cancelled) or ++code>Share.sharedAction++/code> (user shared your content!).

Finally, you can restrict the apps that the user can use to share the content with ++code>excludedActivityTypes++/code> (iOS only too!). This can be useful if you want to restrict/force the user to share on a particular website.

Beware of empty url on iOS

On iOS, we got a weird behavior when url was set to an empty string: after calling the share method, the message being shared was containing a .app file. To workaround this, just be sure to set url to undefined.

Always check the end result

When you've added some sharing feature to your app, be sure to check the result on most popular social networks. For example, Facebook may ignore the message or title that you've entered and just use the URL, using OpenGraph tags to display the preview of the link in the user feed.

If it's important for your application to display a rich preview of the product/item/page that was shared, but make sure to double-check the result and use these custom tags.

About react-native-share

React Native Share API was officially added into React Native documentation since release 0.39 If you have an older version and don't want to rely on undocumented features, you can use react-native-share.

Advanced sharing on Facebook and ++code>react-native-fbsdk++/code>

If you want deeper integration with Facebook, you can use react-native-fbsdk to add and access to the Facebook SDK. The SDK contains a Sharing API which you can use to post custom actions (achievements, scores...) to the user feed.

Note that you need to ask the proper permission to Facebook before being able to use this API with your app.

You can also use Send buttons, LikeView and other Facebook specific components. This will need more time integrate into your app to your app compared to simply sharing an URL, so consider what is really needed by your app and how it will be used by your users before spending too much time on it :)