Lines Matching refs:the

12 … learn how to take a screenshot using a third-party library and save it on the device's media libr…
13 We'll use the following libraries [`react-native-view-shot`](https://github.com/gre/react-native-vi…
23 To install both libraries, run the following commands:
33 … potentially sensitive information, such as access to the media library, we must first request the…
35 …usePermissions()` hook that gives the permission `status`, and a `requestPermission()` method to a…
37 …the app loads for the first time and the permission status is neither granted nor denied, the valu…
39 Add the following code snippet inside the `<App>` component:
45 // ...rest of the code remains same
48 …/* @info Add this statement to import the permissions status and requestPermission() method from t…
49   // ...rest of the code remains same
51 …tatement to check the status of permission. The requestPermission() method will trigger a dialog b…
56   // ...rest of the code remains same
60 Once permission is given, the value of the `status` changes to `granted`.
68 To allow the user to take a screenshot within the app, we'll use [`react-native-view-shot`](https:/…
80 ## Create a ref to save the current view
82 …`captureRef()` that captures a screenshot of a `<View>` in the app and returns the URI of the scre…
84 …re a `<View>`, wrap the `<ImageViewer>` and `<EmojiSticker>` components inside a `<View>` and then…
88 import { useState, /* @info Import the useRef hook from React. */useRef/* @end */ } from 'react';
93   // ...rest of the code remains same
98 …/* @info Add a View component to wrap the ImageViewer and EmojiSticker inside it. */<View ref={ima…
105       /* ...rest of the code remains same */
111 …is set to `false` in the above snippet because this `<View>` component is used to take a screensho…
112 The rest of the contents of the app screen (such as buttons) are not part of the screenshot.
120 …w we can capture a screenshot of the view by calling the `captureRef()` method from `react-native-…
121 `captureRef()` accepts an optional argument where we can pass the `width` and `height` of the area …
122 We can read more about available options in [the library's documentation](https://github.com/gre/re…
124 The `captureRef()` method returns a promise that fulfills with the URI of the captured screenshot.
126 which will save the screenshot to the device's media library.
128 Update the `onSaveImageAsync()` function with the following code:
154   /* @info Replace the comment with the code to capture the screenshot and save the image. */
171   // ...rest of the code remains same
177 Now, choose a photo and add a sticker. Then tap the “Save” button. We should see the following resu…
185 …media-library` work only on Android and iOS, however, we'd like our app to work on the web as well.
190 …description="In the next chapter, let's learn how to handle the differences between mobile and web…