CODEWITHSUNDEEP
imagereact-nativeshare
Payam Roozbahani
Payam Roozbahani

Reputation: 1345

React Native Share View as An Image

I want to share my view as an image in react native. For example this is my view:

<View>
    <Image source={require('myImage.png')}/>
    <Text> My Text </Text>
</View>

Is there a way to share it same as text messages like this:

async shareMyMessage() {
    try {
        await Share.share({
            message: 'It is my message'
        });
    }
    catch(error) {}
}

Should I first draw them on something like a "Canvas" and then share the result? If yes, How? Or is there an easier way?

Upvotes: 0

Views: 1924

Answers (1)

Artem Bespolov
Artem Bespolov

Reputation: 94

It can looks like this:

captureRef(viewRef, {format: "png", quality: 0.8, result: "base64"}).then(base64Data => {
      const base64Data = `data:image/png;base64,` + base64Data;

      Share.open({ url: base64Data })
});

Make screenshot: https://www.npmjs.com/package/react-native-view-shot

Share it: https://www.npmjs.com/package/react-native-share

Upvotes: 1

Related Questions