react-native-share: Image Sharing for WhatsApp is not working

So I’m saving a screenshot locally and passing the URI to Share options. Its working fine for every platform except Whats App.

`let shareOptions = { title: “Share”, url: this.state.cameraRollUri, type: ‘image/png’, message: “Here it is”, subject: “Share Link”, // for email, };

Share.open(shareOptions)`

Just message appears but no image

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 5
  • Comments: 32 (6 by maintainers)

Most upvoted comments

@iSaadSalman can you please check after removing ‘message’ from options, if it is working or not. Whatsapp only allows one of them to be used, i.e. you can only use message or url at a time for whatsapp.

The issue is only on iOS. For Android it works well. Any update on this?

I have found a working workaround for this problem. Currently, I also use it in one of my applications. You can directly plug and play the below onClick function on a button press.

RNFS.downloadFile, downloads the remote image using URL and save it to a path. RNFS.readFile, converts the locally saved file data to base64 which is supported directly by Whatsapp and other applications.

async onClick(url, id){
        const path = `${RNFS.DocumentDirectoryPath}/${id}.jpg`;
        await RNFS.downloadFile({ fromUrl: url, toFile: `file://${path}` }).promise
            .then((res) => {
                return res;
            })
            .catch((err) => {
                return err;
            });
        RNFS.readFile(`file://${path}`, 'base64').then((res) => {
            let shareOptionsUrl = {
                title: 'My Application',
                message: 'Use my application',
                url: `data:image/jpeg;base64,${res}`, // use image/jpeg instead of image/jpg
                subject: 'Share information from your application'
            };
            Share.open(shareOptionsUrl);
        })
    }

Url is the image remote URL and id is some unique identifier for that image.

share image on WA work on my Device, and shareOption like this

let shareOptions = { title: “”, url: this.state.cameraRollUri, message: “”, subject: “”, // for email, }

then i add code

} else if ([options[@“url”] rangeOfString:@“wai”].location != NSNotFound || [options[@“url”] rangeOfString:@“png”].location != NSNotFound || [options[@“url”] rangeOfString:@“jpg”].location != NSNotFound) { NSLog(@“Sending whatsapp image”);

        documentInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:options[@"url"]]];
        documentInteractionController.UTI = @"net.whatsapp.image";
        documentInteractionController.delegate = self;
        [documentInteractionController presentOpenInMenuFromRect:CGRectMake(0, 0, 0, 0) inView:[[[[[UIApplication sharedApplication] delegate] window] rootViewController] view] animated:YES];
        NSLog(@"Done whatsapp image");
        successCallback(@[]);

on file WhatsAppShare.m line 49

if ([options[@“url”] rangeOfString:@“wam”].location != NSNotFound || [options[@“url”] rangeOfString:@“mp4”].location != NSNotFound) { … successCallback(@[]); // add code here } else { text = (NSString*)CFBridgingRelease(CFURLCreateStringByAddingPercentEscapes(NULL,(CFStringRef) text, NULL,CFSTR(“!*'();😡&=+$,/?%#[]”),kCFStringEncodingUTF8)); … } }

@jgcmarins If you can, maybe add a readme note about this so people know

any update?

The problem with message override still exists. Url does not work if I add a message field. Tested with version 1.1.3.