How can I share pdf file link or image link which will open in react native mobile app web browser. I have added a share button but when the user clicks on it, it opens where to share menu options like WhatsApp, Gmail, messages, etc. But when clicking on WhatsApp it does not send any content why so? Do I need to make use of Gmail, WhatsApp API with my react native android app

code:

import {
  Text,
  View,
  StyleSheet,
  Button,
  Animated,
  Dimensions,
  ScrollView,
  Image,
  TouchableOpacity,
  Linking,
  Platform,
  Share
} from 'react-native';


// inside render

onSharePress = (shareOptions) => Share.share(shareOptions);

const shareOptions = {
   title: 'Download Brochure',
    url: brochure
}

// inside return 

<View style={{paddingLeft: 10, marginRight: 20, flex: 1, flexDirection: 'row', justifyContent: 'flex-end'}}>
    <TouchableOpacity onPress={() => this.onSharePress(shareOptions)}>
         <Icon style={{paddingLeft: 10}} name="md-share" size={25} color="black"/>
     </TouchableOpacity>
</View>

In screenshot below you can see it just opens the share options menu but when I click on some of the platform the content i.e the URL of the file is not sent how can I do that ? Am I missing something ?

How can I share pdf file link or image link which will open in react native mobile app web browser. I have added a share button but when the user clicks on it, it opens where to share menu options like WhatsApp, Gmail, messages, etc. But when clicking on WhatsApp it does not send any content why so? Do I need to make use of Gmail, WhatsApp API with my react native android app

code:

import {
  Text,
  View,
  StyleSheet,
  Button,
  Animated,
  Dimensions,
  ScrollView,
  Image,
  TouchableOpacity,
  Linking,
  Platform,
  Share
} from 'react-native';


// inside render

onSharePress = (shareOptions) => Share.share(shareOptions);

const shareOptions = {
   title: 'Download Brochure',
    url: brochure
}

// inside return 

<View style={{paddingLeft: 10, marginRight: 20, flex: 1, flexDirection: 'row', justifyContent: 'flex-end'}}>
    <TouchableOpacity onPress={() => this.onSharePress(shareOptions)}>
         <Icon style={{paddingLeft: 10}} name="md-share" size={25} color="black"/>
     </TouchableOpacity>
</View>

In screenshot below you can see it just opens the share options menu but when I click on some of the platform the content i.e the URL of the file is not sent how can I do that ? Am I missing something ?

• javascript
• reactjs
• react-native

• @harsh Patel Can you please help me with share in react native ? Why is it not working ? – fun joker Commented Oct 29, 2018 at 12:24
• Sorry to say but I haven't try react JS yet. – Harsh Patel Commented Oct 29, 2018 at 12:25

8 Answers 8

Share.share(content, options) receives content and options parameter separately.

Share.share(content, options) returns a Promise on both Android and IOS. You basically need to resolve the Promise or read the response from it.

Like so

Share.share({
    title:'Some Title',
    // Android
    message: YourURL,
    //ios
    url: YourURL
},{ dialogTitle:"Android Title" })
.then(({action, activityType}) => {
    if(action === Share.sharedAction)
        console.log('Share was successful');
    else
        console.log('Share was dismissed');
})
.catch(err => console.log(err))

Promise returns an object containing action, activityType

If the user dismissed the dialog, the Promise will be resolved with action being Share.dismissedAction else with action being Share.sharedAction

Read the friendly share() docs:

Content

• message - a message to share

• title - title of the message

iOS

• url - an URL to share

At least one of URL and message is required.

So on Android, the url option does nothing, and you probably need to put it into message.

This is works for me: Link

shareApp = () =>{

        let  text = 'Want more buzz around your photos on Insta, Facebook, Twitter, Whatsapp posts?\n\nLet\'s make your stories get more eyeballs..\nDownload TagWag App '
        if(Platform.OS === 'android')
            text = text.concat('https://hackeruna.com')
        else
            text = text.concat('http://itunes.apple.com/app/id1453977874')

        Share.share({
            subject: 'Download TagWag App Now',
            title: 'Download TagWag App Now',
            message: text,
            url:'app://tagwag',

        }, {
            // Android only:
            dialogTitle: 'Share TagWag App',
            // iOS only:
            excludedActivityTypes: []
        })
    }

You have to handle promise for this ..

 onSharePress = (url) => {
    Share.share({
      title: 'Alert Title',
      message: url + '\nMessage goes here.'
    }).then((res) => console.log(res))
      .catch((error) => console.log(error))
  };

like share text on WhatsApp

Linking.openURL(whatsapp://send?text=${'hello whatsApp'});

like share text on Google

Linking.openURL('https://support.google.com/mail/community');

open your Contact in React Native App

Linking.openURL('content://com.android.contacts/contacts');

In my case to share message or url on Android devices.

Version: "react-native": "0.70.2"

export const shareStoredRecords = async () => {
  const message = await getAllStoredRecords();

  try {
    await Share.share({
      message: message,
      url: message,
    });
  } catch (error) {
    console.error(error.message);
  }
};

You can work like this

I am accepting values from another component.

import { Share } from "react-native";
import * as Sharing from "expo-sharing";
import * as FileSystem from "expo-file-system";
import { cacheDirectory, downloadAsync } from "expo-file-system";
const onShare = async (title, message, url, image) => {
    // console.log(image[0])
  const messageAndUrl = message.concat("\n\n").concat(url);
  try {
    url = image[0];
    // console.log({url})
        const uri = await downloadAsync(url , cacheDirectory + "tmp.png");
        // console.log({uri}); // it prints a local image file
        // Share.share({url : uri.uri , message : messageAndUrl });
    const result = await Share.share(
      {
        title,
        url : uri.uri ,
        message: messageAndUrl,
      },
      {
        subject: title,
      }
    );
    if (result.action === Share.sharedAction) {
      // Always work with android
      if (result.activityType) {
        // worked
      } else {
        // shared
      }
    } else if (result.action === Share.dismissedAction) {
      // run only for ios if share is dismissed
    }
  } catch (error) {
    console.log(error);
  }
};

export default { onShare };

So the result in ios

the link is sending as a plaintext in whatsapp but it is working in telegram as a link in android.