Share images and files on react-native using Expo

Question

I've saved the file i want to share locally using FileSystem.downloadAsync

Share.share works fine for iOS. How can I share an image I have saved locally on Android?

I've tried

Both these solutions do not seem to work with Expo.

I'm using react-native version : https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz

FileSystem.downloadAsync(url, FileSystem.documentDirectory+filename).then(({uri})=>{ if(Platform.OS == "android"){ // ??? } else{ Share.share({url:uri}); } })

Is there something i'm missing?

github.com/lucasferreira/react-native-send-intent won't work unless you eject — Chris Gomez
– Chris Gomez, Commented Nov 22, 2018 at 5:14
neither github.com/react-native-community/react-native-share — Chris Gomez
– Chris Gomez, Commented Nov 22, 2018 at 5:15

Yassine El Bouchaibi · Accepted Answer · 2019-07-14 15:23:36Z

7

Since SDK33, you can use Expo Sharing to share any type of file to other apps that can handle its file type even if you're on Android.

See : https://docs.expo.io/versions/latest/sdk/sharing/

Usage is pretty simple :

import * as Sharing from 'expo-sharing'; // Import the library Sharing.shareAsync(url) // And share your file !

answered Jul 14, 2019 at 15:23

Yassine El Bouchaibi

1212 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike K Over a year ago

This enables you to share local files. How can you share files that were loaded into <Image /> from an external source, such as S3?

instanceof Over a year ago

@MikeK you can download the file from S3 using Expo's FileSystem library, and then share the uri of the locally downloaded file.

Mike K Over a year ago

That's what I ended up doing, but seems to be an extra step to me, no? I feel like I should also be able to access the cached/loaded images, not have to download them explicitly to a temporary location and then delete it after sharing it.

David Pears · Accepted Answer · 2020-07-06 15:18:40Z

In order for users to share content saved within our (Expo) app, we structured it like this. (This is working across iOS & Android).

IMPORT SHARING:

import * as FileSystem from 'expo-file-system'; import * as Sharing from 'expo-sharing';

ADD ONPRESS TO BUTTON (OR WHEREVER):

 <Button name="share" onPress={() => openShareDialogAsync(media, { video: media.meta.fileType === 'video', }) } />

SHARE VIDEO OR IMAGE TO ANY APP IN USERS HANDSET

 const openShareDialogAsync = async (mediaProp, options) => { const fileDetails = { extension: options.video ? '.mp4' : '.jpg', shareOptions: { mimeType: options.video ? 'video/mp4' : 'image/jpeg', dialosTitle: options.video ? 'Check out this video!' : 'Check out this image!', UTI: options.video ? 'video/mp4' : 'image/jpeg', }, }; const downloadPath = `${FileSystem.cacheDirectory}${mediaProp.media_id}${fileDetails.extension}`; const { uri: localUrl } = await FileSystem.downloadAsync( mediaProp.url, downloadPath ); if (!(await Sharing.isAvailableAsync())) { showMessage({ message: 'Sharing is not available', description: 'Your device does not allow sharing', type: 'danger', }); return; } await Sharing.shareAsync(localUrl, fileDetails.shareOptions); };

Hope this helps :]

Do you have a full example for this? Where is MediaProp and options being passed from?

Collectives™ on Stack Overflow

Share images and files on react-native using Expo

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related