CODEWITHSUNDEEP
reactjsreact-native
Rohan Kangale
Rohan Kangale

Reputation: 971

React native share image

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.

Upvotes: 20

Views: 50103

Answers (9)

Green
Green

Reputation: 1741

For React Native iOS apps, you can share an image by specifying the image url (as per the docs). For example:

 const onShare = async () => {
    try {
      const result = await Share.share({
        message: "Check out this item!",
        url: `https://upload.wikimedia.org/wikipedia/commons/5/53/Funny_black_lab_mix_dog%27s_look.jpg` // this is the image url!
      });
    } catch (error) {
      alert(error.message);
    }
  };

Upvotes: 0

Vit
Vit

Reputation: 488

Fresh answer from 2022 :) Example with screenshot. Btw, parameter url works in Android

import ViewShot,{captureScreen} from 'react-native-view-shot';
import Share from 'react-native-share';

<Pressable onPress={()=>{
              captureScreen({format: "jpg",quality: 0.8,
                }).then((uri) => { ShareScreenShot(uri); },
                (error) => console.error("Oops, snapshot failed", error));}} >

const ShareScreenShot = async (urifile) => {
  Share.open({message:'Result', url:urifile}) .then((res) => {
    //console.log(res);
  }) .catch((err) => {
    /*err && */console.log('error', err);
  });
}

Upvotes: 0

Soumik Chakraborty
Soumik Chakraborty

Reputation: 253

  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

Upvotes: 0

Bruno Araujo
Bruno Araujo

Reputation: 443

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.

Upvotes: 18

RB RB
RB RB

Reputation: 166

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.

Upvotes: 0

Yassine El Bouchaibi
Yassine El Bouchaibi

Reputation: 121

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 !

Upvotes: 5

pigfly
pigfly

Reputation: 4148

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!

Upvotes: 1

Kishan Oza
Kishan Oza

Reputation: 1735

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 :)

Upvotes: 1

Juanan Jimenez
Juanan Jimenez

Reputation: 224

You can also send the image with Share through the url parameter:

url: "data:image/png;base64,<base64_data>" Cheers

Upvotes: 5

Related Questions