Question 32905 in React native Question posted in
The official React Native documentation can be found here.

How do I get more share options for PDFs using Share in react native?

I am trying to mimic native share functionality shown below in React Native using the Share in react-native, specifically I need the ability to Save to Files, Markup and Print.

enter image description here

The following share sheet is what is shown on React Native when using the following code.

const shareButtonPressed = () => {
    Share.share({
      message: 'Share PDF',
      url: selectedDocument.url,
      title: 'Title',
    });
  };

enter image description here

Tags:

2

Answers


  1. 0

    Considering that you want to share a pdf URL.
    Here is the work around that you can use to handle the use case you have mentioned in the question.

    • You have to save the online URL PDF in the local directory of the Phone.
    • Then you can use react-native-share package to share the image

    Conclusion
    The below code will give desired outputenter image description here

    import React from 'react';
import {View, StyleSheet, Button, Platform} from 'react-native';
import Share from 'react-native-share';
import RNFetchBlob from 'rn-fetch-blob';

export default function App() {
  const pdfUrl = 'https://www.africau.edu/images/default/sample.pdf';

  const saveTempPDF = async () => {
    const {dirs} = RNFetchBlob.fs;
    const response = await RNFetchBlob.config({
      path: `${dirs.DocumentDir}/temp.pdf`,
    }).fetch('GET', pdfUrl);
    const localFilePath = response.path();
    console.log('Local file path:', localFilePath);
    return localFilePath;
  };

  const sharePDF = async () => {
    const uri = await saveTempPDF();
    const shareOptions = {
      title: 'Share PDF',
      url: uri,
      failOnCancel: false,
      activityItemSources: Platform.OS === 'ios' && [
        {
          item: {
            defaultContentType: 'public.jpeg',
            filename: 'sample.pdf',
            type: 'com.adobe.pdf',
            url: uri,
          },
          thumbnailImage: 'file:///some/image.png',
          subject: 'Sample PDF',
        },
      ],
    };

    // Share PDF using Share module
    Share.open(shareOptions)
      .then(res => console.log(res))
      .catch(err => console.log(err));
  };
  return (
    <View style={styles.container}>
      <Button title="share" onPress={sharePDF} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
    Login or Signup to reply.
  2. 0

    If you are using Expo then you can use the below method from expo-sharing.
    https://docs.expo.dev/versions/latest/sdk/sharing/

    and expo file system:
    https://docs.expo.dev/versions/latest/sdk/filesystem/

    import * as Sharing from 'expo-sharing';
import * as FileSystem from 'expo-file-system';

export const shareMobileFile = async (base64: string, fileType: string, fileName: string) => {
  const isAvailable = await Sharing.isAvailableAsync();

  if (!isAvailable) {
    alert('Unable to share file.')
    return;
  }

  try {
    let filepath = `${FileSystem.cacheDirectory}${encodeURIComponent(fileName)}`;
    await FileSystem.writeAsStringAsync(filepath, base64, { encoding: FileSystem.EncodingType.Base64 });
    await Sharing.shareAsync(filepath, { mimeType: fileType, UTI: fileType, dialogTitle: fileName })
  } catch (e) {
    debugger;
    console.log(e);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search