Lines Matching refs:the
13 …isn't possible with these core components and API: selecting an image from the device's media libr…
17 …ge-picker` provides access to the system's UI to select images and videos from the phone's library…
23 To install the library, run the following command:
27 …ur project, we must stop the development server by pressing <kbd>Ctrl</kbd> + <kbd>c</kbd> in the …
28 > After the installation, we can start the development server again by running `npx expo start` fro…
34 ## Pick an image from the device's media library
36 …mage-picker` provides the `launchImageLibraryAsync()` method that displays the system UI for choos…
38 We can use the button with the primary theme we created in the previous chapter to pick an image fr…
39 We'll create a function to launch the device's image library to implement this functionality.
41 In **App.js**, import the `expo-image-picker` library and create a `pickImageAsync()` function insi…
45 // ...rest of the import statements remain unchanged
46 /* @info Import the ImagePicker. */ import * as ImagePicker from 'expo-image-picker'; /* @end */
58 /* @info If the image is picked, print its information in terminal window. */
62 /* @info If the user does not picks an image, show an alert. */
68 // ...rest of the code remains same
72 Let's learn what the above code does.
76 We can pass the object to specify different options when invoking the method.
77 …lowsEditing` is set to `true`, the user can crop the image during the selection process on Android…
83 ## Update the button component
85 When the primary button gets pressed, we need to call the `pickImageAsync()` function.
86 To call it, update the `onPress` property of the `<Button>` component in **components/Button.js**:
90 …ion Button({ label, theme, /* @info Pass this prop to trigger the handler method from the parent …
91 // ...rest of the code remains same
95 /* ...rest of the code remains same */
106 In **App.js**, add the `pickImageAsync()` function to the `onPress` prop on the first `<Button>`.
111 // ...rest of the code remains same
115 /* ...rest of the code remains same */
122 …n is responsible for invoking `ImagePicker.launchImageLibraryAsync()` and then handling the result.
123 The `launchImageLibraryAsync()` method returns an object containing information about the selected …
125 To demonstrate what properties the `result` object contains, here is an example result object:
151 ## Use the selected image
153 The `result` object provides the `assets` array, which contains the `uri` of the selected image.
154 Let's take this value from the image picker and use it to show the selected image in the app.
156 Modify the **App.js** file in the following steps:
158 - Declare a state variable called `selectedImage` using the <A href="https://react.dev/learn/state-…
159 We'll use this state variable to hold the URI of the selected image.
160 - Update the `pickImageAsync()` function to save the image URI in the `selectedImage` state variabl…
161 - Then, pass the `selectedImage` as a prop to the `ImageViewer` component.
166 // ...rest of the import statements remain unchanged
169 /* @info Create a state variable that will hold the value of selected image. */
180 …/* @info Pick the first uri from the assets array. Also, there is only one image selected at a tim…
191 /* @info Pass the selected image URI to the ImageViewer component. */<ImageViewer
197 /* ...rest of the code remains same */
203 Now, modify the **components/ImageViewer.js** file to conditionally display the selected image in p…
204 We'll need to pass the `selectedImage` prop to the component.
206 The source of the image is getting long, so let's also move it to a separate variable called `image…
207 Then, pass it as the value of the `source` prop on the `<Image>` component.
221 export default function ImageViewer({ placeholderImageSource, /* @info Pass the selectedImage prop.…
222 …/* @info If the selected image is not null, show the image from the device, otherwise, show the pl…
232 In the above snippet, the `<Image>` component uses a conditional operator to load the source of the…
233 This is because the image picked from the image picker is a <A href="https://reactnative.dev/docs/i…
234 not a local asset like the placeholder image.
240 > The images used for the demo in this tutorial were picked from [Unsplash](https://unsplash.com).
246 We added the functionality to pick an image from the device's media library.
251 description="In the next chapter, we'll learn how to create an emoji picker modal component."