Share a screenshot in React-Native using expo

Question

I would like to share a screenshot of one screen but it returns an error and I don't get why. I use react-native-view-shot as I saw it on the expo documentation.

If anyone can help me to make it work, that would be really cool. Thanks a lot

const targetPixelCount = 1080;
const pixelRatio = PixelRatio.get();
const pixels = targetPixelCount / pixelRatio;

[...]

  onShare = async () => {
          try {
            const result = await takeSnapshotAsync(this.imageContainer, {
                  result: 'tmpfile',
                  height: pixels,
                  width: pixels,
                  quality: 1,
                  format: 'png',
                });
    
            if (result.action === Share.sharedAction) {
              if (result.activityType) {
                // shared with activity type of result.activityType
              } else {
                // shared
              }
            } else if (result.action === Share.dismissedAction) {
              // dismissed
            }
          } catch (error) {
            alert(error.message);
          }
        };

[...]

UPDATE EDIT : After using @Hayden S. answer I did :

onShare = async () => {
      try {
        const result = await captureScreen({
            format: "jpg",
            quality: 0.8
          }).then(
            uri => console.log("Image saved to", uri),
            error => console.error("Oops, snapshot failed", error)
          );
        if (result.action === Share.sharedAction) {
          if (result.activityType) {
            // shared with activity type of result.activityType
          } else {
            // shared
          }
        } else if (result.action === Share.dismissedAction) {
          // dismissed
        }
      } catch (error) {
        alert(error.message);
      }
    };

It returns :

user_9593033 · Answer

Please make sure you linked the package correct.

If your react-native version is under 0.60, you will need to use

  react-native link react-native-view-shot

If you use react-native higher than 0.60, you will need to make sure pods are installed correct.

  npx pod-install

Also, I recommend you to use captureScreen instead of takeSnapshotAsync.

import { captureScreen } from "react-native-view-shot";

captureScreen({
  format: "jpg",
  quality: 0.8
}).then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);

user_12175272 · Answer

This is what has solved my problem in the end:

openShareDialogAsync = async () => {
      if (!(await Sharing.isAvailableAsync())) {
        alert(`Uh oh, sharing isn't available on your platform`);
        return;
      }
      captureRef(this._shareViewContainer, {
        // defaults
      }).then(
        uri => {
          console.log('Image saved to', uri);
          Sharing.shareAsync(uri);
        },
        error =>
          console.error('Oops, snapshot failed', error)
      );
    };

[...]

   {
              this._shareViewContainer = view;
          }}>

Share a screenshot in React-Native using expo

2 Answers