---
title: Take a screenshot
---
import { SnackInline, Terminal } from '~/ui/components/Snippet';
import Video from '~/components/plugins/Video';
import { A } from '~/ui/components/Text';
import { Step } from '~/ui/components/Step';
import { BoxLink } from '~/ui/components/BoxLink';
import { BookOpen02Icon } from '@expo/styleguide-icons';
In this chapter, we will learn how to take a screenshot using a third-party library and save it on the device's media library.
We'll use the following libraries [`react-native-view-shot`](https://github.com/gre/react-native-view-shot) that allows taking a screenshot,
and `expo-media-library` that allows accessing a device's media library to save an image.
> So far, we have been using some third-party libraries such as `react-native-gesture-handler`, `react-native-reanimated`, and now `react-native-view-shot`.
> We can find hundreds of other third-party libraries on [React Native Directory](https://reactnative.directory/).
## Install libraries
To install both libraries, run the following commands:
## Prompt for permissions
When creating an app that requires access to potentially sensitive information, such as access to the media library, we must first request the user's permission.
`expo-media-library` provides a `usePermissions()` hook that gives the permission `status`, and a `requestPermission()` method to ask for access to the media library when permission is not granted.
Initially, when the app loads for the first time and the permission status is neither granted nor denied, the value of the `status` is `null`. When asked for permission, a user can either grant the permission or deny it. We can add a condition to check if it is `null`, and if it is, trigger the `requestPermission()` method.
Add the following code snippet inside the `` component:
{/* prettier-ignore */}
```jsx App.js
/* @info Import expo-media-library. */import * as MediaLibrary from 'expo-media-library';/* @end */
// ...rest of the code remains same
export default function App() {
/* @info Add this statement to import the permissions status and requestPermission() method from the hook. */const [status, requestPermission] = MediaLibrary.usePermissions();/* @end */
// ...rest of the code remains same
/* @info Add an if statement to check the status of permission. The requestPermission() method will trigger a dialog box for the user to grant or deny the permission. */
if (status === null) {
requestPermission();/* @end */
}
// ...rest of the code remains same
}
```
Once permission is given, the value of the `status` changes to `granted`.
## Picking a library to take screenshots
To allow the user to take a screenshot within the app, we'll use [`react-native-view-shot`](https://github.com/gre/react-native-view-shot). It allows capturing a `` as an image.
Let's import it into **App.js** file:
```jsx App.js
import { captureRef } from 'react-native-view-shot';
```
## Create a ref to save the current view
The `react-native-view-shot` library provides a method called `captureRef()` that captures a screenshot of a `` in the app and returns the URI of the screenshot image file.
To capture a ``, wrap the `` and `` components inside a `` and then pass a reference to it. Using the `useRef()` hook from React, let's create an `imageRef` variable inside ``.
{/* prettier-ignore */}
```jsx App.js
import { useState, /* @info Import the useRef hook from React. */useRef/* @end */ } from 'react';
export default function App() {
/* @info Create an imageRef variable. */ const imageRef = useRef();/* @end */
// ...rest of the code remains same
return (
/* @info Add a View component to wrap the ImageViewer and EmojiSticker inside it. *//* @end */
{pickedEmoji !== null ? (
) : null}
/* @info *//* @end */
/* ...rest of the code remains same */
);
}
```
The `collapsable` prop is set to `false` in the above snippet because this `` component is used to take a screenshot of the background image and the emoji sticker.
The rest of the contents of the app screen (such as buttons) are not part of the screenshot.
## Capture a screenshot and save it
Now we can capture a screenshot of the view by calling the `captureRef()` method from `react-native-view-shot` inside the `onSaveImageAsync()` function.
`captureRef()` accepts an optional argument where we can pass the `width` and `height` of the area we'd like to capture a screenshot for.
We can read more about available options in [the library's documentation](https://github.com/gre/react-native-view-shot#capturerefview-options-lower-level-imperative-api).
The `captureRef()` method returns a promise that fulfills with the URI of the captured screenshot.
We will pass this URI as a parameter to `MediaLibrary.saveToLibraryAsync()`,
which will save the screenshot to the device's media library.
Update the `onSaveImageAsync()` function with the following code:
{/* prettier-ignore */}
```jsx
export default function App() {
/* @info Replace the comment with the code to capture the screenshot and save the image. */
const onSaveImageAsync = async () => {
try {
const localUri = await captureRef(imageRef, {
height: 440,
quality: 1,
});
await MediaLibrary.saveToLibraryAsync(localUri);
if (localUri) {
alert("Saved!");
}
} catch (e) {
console.log(e);
}
};
/* @end */
// ...rest of the code remains same
}
```
Now, choose a photo and add a sticker. Then tap the “Save” button. We should see the following result:
## Next step
The `react-native-view-shot` and `expo-media-library` work only on Android and iOS, however, we'd like our app to work on the web as well.