Share.shareSingle
The shareSingle() method allows a user to share a premade message via a single prechosen social medium. In other words, code specifies both the message that will be sent and the social medium through which the message will be sent. The user chooses only to whom the message is sent. This shared message may contain text, one or more files, or both.
Open the share dialog with the specific application. This returns a promise similar to Share.open
, keep in mind that you will need to handle the same response when the user cancel/dismiss.
Using a promise implementation:
const shareOptions = {
title: 'Share via',
message: 'some message',
url: 'some share url',
social: Share.Social.WHATSAPP,
whatsAppNumber: "9199999999", // country code + phone number
filename: 'test' , // only for base64 file in Android
};
Share.shareSingle(shareOptions)
.then((res) => { console.log(res) })
.catch((err) => { err && console.log(err); });
Or with async/await
:
const shareOptions = {
title: 'Share via',
message: 'some message',
url: 'some share url',
social: Share.Social.WHATSAPP,
whatsAppNumber: "9199999999", // country code + phone number
filename: 'test' , // only for base64 file in Android
};
const fun = async () => {
const shareResponse = await Share.shareSingle(shareOptions);
}
*Note that in the case of a user closing the share sheet without sharing, an error will be thrown. It is up to you to handle this error, i.e.:
try {
const shareResponse = await Share.shareSingle(shareOptions);
} catch (error) {
// handle error
}
Supported Options
You can pass the option that will be handled by the native code, similar to Share.open
.
Name | Type | Description | Optional | Android | iOS | Windows |
---|---|---|---|---|---|---|
url | string | URL you want to share | ✅ | ✅ | ✅ | ❓ |
urls | string[] | URL you want to share (it only works for EMAIL case) | ✅ | ✅ | ✅ | ❓ |
type | string | File mime type (required for sharing file with INSTAGRAM ) | ✅ | ✅ | ✅ | ❓ |
filename | string | Custom file name for email attachment | ✅ | ✅ | ✅ | ❓ |
message | string | Message sent to the share activity | ✅ | ✅ | ✅ | ❓ |
title | string | Title sent to the share activity | ✅ | ✅ | ✅ | ❓ |
subject | string | Subject sent when sharing to email | ✅ | ✅ | ✅ | ❓ |
string | Email of addressee | ✅ | ✅ | ✅ | ❓ | |
recipient | string | Phone number of SMS recipient | ✅ | ✅ | ✅ | 🚫 |
social | string | supported social apps: List | 🚫 | ✅ | ✅ | ❓ |
forceDialog | boolean | (optional) only android. Avoid showing dialog with buttons Just Once / Always. Useful for Instagram to always ask user if share as Story or Feed | ✅ | ✅ | ✅ | ❓ |
useInternalStorage | boolean | Store the temporary file in the internal storage cache (Android only) | ✅ | ✅ | 🚫 | 🚫 |
NOTE: If both message
and url
are provided, url
will be concatenated to the end of message
to form the body of the message. If only one is provided it will be used
Supported Applications
react-native-share
export a enum
containing all supported apps, wich can be seen here.
Name | Android | iOS | Windows |
---|---|---|---|
✅ | ✅ | 🚫 | |
FACEBOOK_STORIES | ✅ | ✅ | 🚫 |
PAGESMANAGER | ✅ | 🚫 | 🚫 |
✅ | ✅ | 🚫 | |
WHATSAPPBUSINESS | ✅ | 🚫 | 🚫 |
✅ | ✅ | 🚫 | |
INSTAGRAM_STORIES | ✅ | ✅ | 🚫 |
GOOGLEPLUS | ✅ | ✅ | 🚫 |
✅ | ✅ | 🚫 | |
✅ | 🚫 | 🚫 | |
SMS | ✅ | ✅ | 🚫 |
SNAPCHAT | ✅ | 🚫 | 🚫 |
MESSENGER | ✅ | ✅ | 🚫 |
✅ | 🚫 | 🚫 | |
TELEGRAM | ✅ | ✅ | 🚫 |
VIBER | ✅ | ✅ | 🚫 |
Instagram
Share Instagram Stories
These values can be used when you are calling the method Share.single
passing the attributes that you need (You can combine these attributes, Story will use properties that you pass).
import Share from 'react-native-share';
const shareOptions = {
backgroundImage: 'http://urlto.png',
stickerImage: 'data:image/png;base64,<imageInBase64>', //or you can use "data:" link
backgroundBottomColor: '#fefefe',
backgroundTopColor: '#906df4',
attributionURL: 'http://deep-link-to-app', //in beta
social: Share.Social.INSTAGRAM_STORIES,
appId: 'your_fb_app_id' // required since Jan 2023 (see: https://developers.facebook.com/docs/instagram/sharing-to-stories/#sharing-to-stories)
};
Share.shareSingle(shareOptions);
Supported options for INSTAGRAM_STORIES:
Name | Type | Description | Optional |
---|---|---|---|
appId | string | (required) facebook app ID | ❗️required |
backgroundImage | string | URL you want to share | ✅ |
stickerImage | string | URL you want to share | ✅ |
backgroundBottomColor | string | default #837DF4 | ✅ |
backgroundTopColor | string | default #906df4 | ✅ |
attributionURL | string | (optional) facebook beta-test | ✅ |
backgroundVideo | string | URL you want to share | ✅ |
linkUrl | string | (optional) A URL to be used as a link in the shared content. | |
linkText | string | (optional) Text to be used as a link in the shared content. |
Share image to Instagram
import Share, { Social } from 'react-native-share'
await Share.shareSingle({
social: Share.Social.INSTAGRAM,
url: 'data:image/png;base64,<imageInBase64>',
type: 'image/*'
});
Note: Your app's user must accept "All Photos" when prompted about photo permissions otherwise they may get a "Something went wrong" error.
Share remote videos to Instagram
Instagram tries to select the very last file of the cameraroll so you have to save videos to the cameraroll in case you want to share them to Instagram.
import Share from 'react-native-share';
import RNFetchBlob from 'rn-fetch-blob';
import CameraRoll from '@react-native-community/cameraroll';
const cache = await RNFetchBlob.config({
fileCache: true,
appendExt: 'mp4',
}).fetch('GET', "YOUR OWN REMOTE VIDEO URL", {});
const gallery = await CameraRoll.save(cache.path(), 'video');
cache.flush();
await Share.shareSingle({
social: Share.Social.INSTAGRAM,
url: gallery,
type: "video/*"
});
Opening Instagram Share Screen (Camera view)
By default IG opens New post view with Camera View. There you can find also story and gallery view to pick multiple pictures to publish.
Android + IOS
import Share from 'react-native-share';
const shareOptions = {
url: 'instagram://camera',
social: Share.Social.INSTAGRAM
};
Share.shareSingle(shareOptions);
Android
import Share from 'react-native-share';
const shareOptions = {
url: 'instagram://share',
social: Share.Social.INSTAGRAM
};
Share.shareSingle(shareOptions);
URL patterns like instagram://
can be used on Android, but works different then documented for IOS
https://developers.facebook.com/docs/instagram/sharing-to-feed/
Facebook
Static Values for Facebook Stories
These values can be used when you are calling the method Share.single
passing the attributes that you need (You can combine these attributes, Story will use properties that you pass).
import Share from 'react-native-share';
const shareOptions = {
backgroundVideo: 'URI_TO_MP4', // Android only (uri to a local file)
backgroundImage: 'http://urlto.png', // url or an base64 string
stickerImage: 'data:image/png;base64,<imageInBase64>', //or you can use "data:" url
backgroundBottomColor: '#fefefe',
backgroundTopColor: '#906df4',
attributionURL: 'http://deep-link-to-app', //in beta
appId: '219376304', //facebook appId
social: Share.Social.FACEBOOK_STORIES
};
Share.shareSingle(shareOptions);
Supported options for FACEBOOK_STORIES
:
Name | Type | Description |
---|---|---|
appId | string | (required) facebook appId |
backgroundImage* | string | URL you want to share (iOS) / URI to a local file (Android) |
backgroundVideo* | string | URI to a local file (Android only) |
stickerImage* | string | URL you want to share (iOS) / URI to a local file (Android) |
backgroundBottomColor | string | (optional) default #837DF4 |
backgroundTopColor | string | (optional) default #906df4 |
attributionURL | string | (optional) facebook beta-test |
* check the platform specific documentation (Android/iOS) to understand the differences between them.
Telegram
Share Intent to Telegram
Share.shareSingle({
title: 'Share via',
message: 'some message',
url: 'some share url',
social: Share.Social.TELEGRAM,
})
Viber
Share Intent to Viber
Share.shareSingle({
title: 'Share via',
message: 'some message',
url: 'some share url',
social: Share.Social.VIBER,
})