Search code examples
react-nativeexposcreenshotshare

Share a screenshot in React-Native using expo

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

[...]

<TouchableOpacity
      style={styles.touchable2}
      onPress={this.onShare}
  >
   <Image
      source={require("../../assets/images/share.png")}
      style={styles.tripsimg2}
    />
  </TouchableOpacity>

enter image description here

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 : enter image description here

Solution

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