React native share image

user_4831087 0
Viewed 37780

I am trying to share an image, either taken from camera or from gallery, to other devices through various available device's application's(eg whatsApp, skype, email etc.) I found the "Share" function provided but as per my knowledge and research, it only allows to share text data.

Has someone have any idea for sharing an image through a react native application.

Thanks in advance.

react-native reactjs
7 Answers

Solution:

  • Get the path of the image to convert base64.

  • For share image use: react-native-share lib share

  • To access the device directories, I recommend using: rn-fetch-blob. Wikki lib

      dwFile(file_url) {
      let imagePath = null;
      RNFetchBlob.config({
          fileCache: true
      })
      .fetch("GET", file_url)
      // the image is now dowloaded to device's storage
      .then(resp => {
          // the image path you can use it directly with Image component
          imagePath = resp.path();
          return resp.readFile("base64");
      })
      .then(async base64Data => {
          var base64Data = `data:image/png;base64,` + base64Data;
          // here's base64 encoded image
          await Share.open({ url: base64Data });
          // remove the file from storage
          return fs.unlink(imagePath);
      });
  }

Hope this helps.

user_72895610

Since Expo's 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. Without detaching or anything.

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 !
user_117829850

I tried as following:

import {
     Share
} from 'react-native';
 let shareImage = {
                title: caption,//string
                message: message,//string
                url:imageUrl,// eg.'http://img.gemejo.com/product/8c/099/cf53b3a6008136ef0882197d5f5.jpg',

            };
            Share.open(shareImage).catch(err => console.log(err));

Hope this will help you.Cheers!

user_72599830

I used react-native-share plugin to do the same

Steps :

  1. npm install react-native-share --save
  2. react-native link

Read here for rest of the code ...its very easy and straight forward. If you want to share image in base64 u have to pass like this :

"data:image/png;base64,BASE STRING"

And If you want to share directly from source you have to pass like this :

url: "file://<file_path>",

Hope this helps :)

user_61094590

You cannot share both image and url simultaneously on most of the social media or platform. To do so, you will need a sharable image link that is can be created by API.

user_75488430 
  Share.share({
      message: "dummy text",
      url:"https://xyz.jpg"
    })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    })

Try this code, this should work

user_173075160
Related