Share an image in a React Native app (2024)

React Native ViewShot is a library that allows you to capture screenshots of React Native components or views. It allows you to take screenshots of the entire screen, a specific component, or a portion of the screen, and save the image in various formats such as PNG or JPG. The library also provides options to control the quality and size of the screenshot, and allows you to add a delay before taking the screenshot. Additionally, you can specify additional options like capture the whole screen including transparent areas, and capture the view in a specific resolution.

This is a short tutorial on how to use the React Native ViewShot library to capture a screenshot of an image and share it using the React Native Share library.

1. First, import the necessary modules from React Native, including the SafeAreaView, TouchableOpacity, StyleSheet, Image, Text, and View components. Also, import React and useRef from React and ViewShot and captureRef from the React Native ViewShot library, as well as Share from the React Native Share library.
2. Create a new functional component called App. Inside of this component, create a useRef hook and assign it to a variable called ref. This ref variable will be used to reference the image we want to take a screenshot of.
3. In the App component, create a new function called shareImage. This function will be called when a user presses the share button. Inside this function, use the captureRef function from the React Native ViewShot library to capture the screenshot of the image by passing in the ref variable and some options such as format, and quality.
4. Use the Share.open function from the React Native Share library to open the share dialog and pass in the URI of the screenshot as the url parameter.
5. In the render method of the App component, use the ViewShot component and pass in the ref variable to it. Inside the ViewShot component, render the image that you want to take a screenshot of.
6. Create a touchable opacity button and call the shareImage function when it’s pressed.
7. Finally, include some styles using the StyleSheet.create method to make the UI look good.
8. Don’t forget to export the App component.

That’s it! Now when the user presses the share button, the screenshot of the image will be captured and the user will be prompted to share it via the share dialog.

Here is the code:

import {
 SafeAreaView,
 TouchableOpacity,
 StyleSheet,
 Image,
 Text,
 View,
} from 'react-native';
import React, {useRef} from 'react';
import ViewShot, {captureRef} from 'react-native-view-shot';
import Share from 'react-native-share';
const App = () => {
 const ref = useRef();
 const imagePlaceholder =
 'https://images.unsplash.com/photo-1673209139602-30b6e9100131?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80';
 const shareImage = async () => {
 try {
 const uri = await captureRef(ref, {
 format: 'png',
 quality: 0.7,
 });
 console.log('uri', uri);
 await Share.open({url: uri});
 } catch (e) {
 console.log(e);
 }
 };
 return (
 <SafeAreaView>
 <View style={styles.container}>
 <Text style={styles.titleText}>React Native Image Share</Text>
 <ViewShot ref={ref}>
 <Image
 style={styles.generatedImage}
 source={{
 uri: imagePlaceholder,
 }}
 />
 </ViewShot>
 <TouchableOpacity style={styles.generateButton} onPress={shareImage}>
 <Text style={styles.generateButtonText}>share</Text>
 </TouchableOpacity>
 </View>
 </SafeAreaView>
 );
};
export default App;
const styles = StyleSheet.create({
 container: {
 paddingHorizontal: 10,
 alignItems: 'center',
 },
 titleText: {
 fontSize: 20,
 fontWeight: 'bold',
 fontFamily: 'Cochin',
 textAlign: 'center',
 },
 generateButton: {
 height: 50,
 width: 300,
 backgroundColor: 'black',
 borderRadius: 10,
 marginVertical: 10,
 justifyContent: 'center',
 alignItems: 'center',
 },
 generateButtonText: {
 color: 'white',
 },
 generatedImageContainer: {
 justifyContent: 'center',
 alignItems: 'center',
 },
 generatedImage: {
 width: 300,
 height: 300,
 resizeMode: 'contain',
 },
});