截图

Install libraries

To install react-native-view-shot and expo-media-library, run the following commands:

!!!IG3!!!

Prompt for permissions

An app that requires sensitive information, such as accessing a device's media library, has to prompt permission to allow or deny access. Using usePermissions() hook from expo-media-library, we can use the permission status and requestPermission() method to ask for access.

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. After getting the access, the value of the status changes to granted.

Add the following code snippet inside the app/(tabs)/index.tsx:

!!!IG4!!!

!!!IG0!!!

Create a ref to save the current view

We'll use react-native-view-shot to allow the user to take a screenshot within the app. This library captures the screenshot of a <View> as an image using the captureRef() method. It returns the URI of the captured screenshot image file.

1. Import captureRef from react-native-view-shot and useRef from React.
2. Create an imageRef reference variable to store the reference of the screenshot image captured.
3. Wrap the <ImageViewer> and <EmojiSticker> components inside a <View> and then pass the reference variable to it.

!!!IG5!!!

!!!IG1!!!

In the above snippet, the collapsable prop is set to false. This allows the <View> component to screenshot only of the background image and emoji sticker.

Capture a screenshot and save it

We can capture a screenshot of the view by calling the captureRef() method from react-native-view-shot inside the onSaveImageAsync() function. It accepts an optional argument where we can pass the width and height of the screenshot capturing area. We can read more about available options in the library's documentation.

The captureRef() method also returns a promise that fulfills with the screenshot's URI. We will pass this URI as a parameter to MediaLibrary.saveToLibraryAsync() and save the screenshot to the device's media library.

Inside app/(tabs)/index.tsx, update the onSaveImageAsync() function with the following code:

!!!IG6!!!

!!!IG2!!!

Now, choose a photo and add a sticker in the app. Then tap the "Save" button. We should see the following result on Android and iOS: