3

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 ?

enter image description here

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

8 Answers 8

Reset to default
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

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

1 Comment

How can we make this link clickable if its shared on Whatsapp, Skype or SMS?
3

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.

Improve this answer

Comments

2

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: [] }) }
Improve this answer

Comments

1

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)) };
Improve this answer

Comments

0

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');

Improve this answer

Comments

0

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); } };
Improve this answer

Comments

0

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

enter image description here enter image description here

Improve this answer

Comments

-2

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.