react-native-share: Cannot share image in base64 to telegram

Steps to reproduce

1. const url = 'data:image/jpeg;base64,' + base64string; 2. ``` const options = { title: ‘React Native’, url: url, subject: ‘Share Link’, // for email };


Share.open(options);
3. And loading takes forever

### Expected behaviour
Image loaded succesfully

### Actual behaviour
Image loading takes forever

### Environment
- **React Native version**: "^0.61.5"
- **React Native platform + platform version**: iOS 13.3.1

### react-native-share
**Version**: npm version or "master" "^3.1.0"

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 22

Most upvoted comments

Hi, i had the same issue on iOS with sharing via telegram and i solved it with using the image-path instead of a base64 string:

function sharing() {
		if (isOnline) {
			viewshot.current.capture().then(async (uri) => {
				const shareOptions = {
					type: 'image/jpeg',
					message: sharedMessage,
					url: Platform.OS === 'android' ? 'file://' + uri : uri,
				};
				console.log('Share: ', Share);
				await Share.open(shareOptions)
					.then((res) => ({error: '', payload: res, success: true}))
					.catch((err) => ({error: (err && err.error) || 'User did not share', payload: {}, success: false}));
			});
		} else {
			Alert.alert('you have no internet!');
		}
	}

+15

youngSt4r1 on May 28, 2020

thanks to @youngSt4r1 i have used saving to cache before sharing image to telegram

import RNFS from 'react-native-fs';

RNFS.writeFile(`${RNFS.CachesDirectoryPath}/name.png`, base64, 'base64');
const shareOptions = {
                // title: 'React Native Share Example',
                // message: 'Check out this photo!',
                url: `${RNFS.CachesDirectoryPath}/name.png`,
                type: 'image/png',
                // subject: 'Check out this photo!',
            };
Share.open(shareOptions);

lochmatij on Sep 22, 2020

I tap share, then choose telegram, and then choose dialog and permanent loading

bestspyever on Mar 20, 2020

This worked perfectly for me

await RNFS.writeFile(
  `${RNFS.CachesDirectoryPath}/qrcode.png`,
  base64String.replace('data:image/png;base64,', ''), // make sure to strip out data: part, if it is removed, then no need for  .replace() part
  'base64',
);
await Share.open({
  url: `${RNFS.CachesDirectoryPath}/qrcode.png`,
  type: 'image/png',
});

Mukhammadali on Jun 2, 2022

Yesterday I tested on Android and it worked (2.4MB img)

I used only the URL in base64 format, without subject or other params.

vforvasile on Mar 25, 2020

Text was shared succesfully.

bestspyever on Mar 20, 2020