Table of content
Capture and Share Screenshots in React Native
Many applications require sharing screenshots of the app to other users using different media platforms. Sharing a screenshot in react native is also very easy. Thanks to react-native-view-shot to capture the app's screen and convert it into an image to share, react-native-fs to access native file systems on the device and react-native-share to share text or image via multiple social media platforms. In this blog, let’s learn how to capture a screenshot and share it.
1. Downloading Dependencies:
yarn add react-native-view-shotyarn add react-native-shareyarn add react-native-fs
Before React Native 0.60.x we would need to link it using the following command:
react-native link react-native-view-shotreact-native link react-native-sharereact-native link react-native-fs
After React Native 0.60.x auto-link should just work.
On iOS we would need to install dependency using pod files:
In the iOS folder of the project, we need to run below command -
npx pod install
2. Capturing Screenshot:
To capture a screenshot of a View, we should make ViewShot as the parent of that View.
Add below line in the import statements:
import ViewShot from ‘react-native-view-shot’;
Update code by making ViewShot as the parent of the View.
<ViewShot style={styles.container} ref="viewShot" options=> <View> <Button style={styles.label} title="Capture and Share" onPress={this.captureAndShareScreenshot} /> </View></ViewShot>
Capture screenshot on button click like -
captureAndShareScreenshot = () => { this.refs.viewShot.capture().then((uri) => { RNFS.readFile(uri, 'base64').then((res) => { let urlString = 'data:image/jpeg;base64,' + res; let options = { title: 'Share Title', message: 'Share Message', url: urlString, type: 'image/jpeg', }; Share.open(options) .then((res) => { console.log(res); }) .catch((err) => { err && console.log(err); }); }); }); };
Conclusion:
See how easy peasy it is to capture screenshot and convert it into an image and share. I hope this blog sound informative and useful to you. If you have any queries, please feel free to contact me on pankaj@gkmit.co or you can drop a message in the comments section below.
Frequently Asked Questions
-
Books play an important role in children's education by improving literacy skills, expanding vocabulary, promoting creativity, and encouraging critical thinking. They help children develop emotional intelligence, broaden their knowledge, and cultivate a lifelong love for learning
-
Books play an important role in children's education by improving literacy skills, expanding vocabulary, promoting creativity, and encouraging critical thinking. They help children develop emotional intelligence, broaden their knowledge, and cultivate a lifelong love for learning
-
Books play an important role in children's education by improving literacy skills, expanding vocabulary, promoting creativity, and encouraging critical thinking. They help children develop emotional intelligence, broaden their knowledge, and cultivate a lifelong love for learning
.webp?height=245&name=Library1.1%20(1).webp)
-11.webp?height=245&name=Blog(%20The%20Magic%20of%20Reading)-11.webp)
.webp?height=245&name=celebrating-the-incredible-staff-at-ocasa-01%20(1).webp)
-1.png?height=245&name=image%20(14)-1.png)
.webp?height=245&name=smart%20learning-16%20(2).webp)
%20_653%20X%20518%20_%202%20copy%206.webp?height=245&name=Blog%20images(Empowering%20Young%20Innovators)%20_653%20X%20518%20_%202%20copy%206.webp)
.webp?height=245&name=Hands-on%20Learning%20to%20Revolutionize%20Core%20Education-09-09%20(1).webp)
.webp?height=245&name=mothers%20day-18%20(1).webp)
.webp?height=245&name=Main%20Banner@2x%20(1).webp)
