Madhavan Malolan
Madhavan Malolan

Reputation: 750

Share images and files on react-native using Expo

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?

Upvotes: 7

Views: 12269

Answers (2)

David Pears
David Pears

Reputation: 495

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

  1. IMPORT SHARING:
import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';
  1. ADD ONPRESS TO BUTTON (OR WHEREVER):
  <Button
   name="share"
   onPress={() =>
      openShareDialogAsync(media, {
         video: media.meta.fileType === 'video',
         })
       }
   />
  1. 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 :]

Upvotes: 6

Yassine El Bouchaibi
Yassine El Bouchaibi

Reputation: 121

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 !

Upvotes: 7

Related Questions