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>
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);
}
};
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)
);
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)
);
};
[...]
<View style={{ width: "100%", height: height }}
collapsable={false}
ref={view => {
this._shareViewContainer = view;
}}>
<TouchableOpacity
style={styles.touchable2}
onPress={this.openShareDialogAsync}
>
<Image
source={require("../../assets/images/share.png")}
style={styles.tripsimg2}
/>
</TouchableOpacity>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.