You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<title>Take Photos From The Camera on React Apps - Ionic Documentation</title>
7
+
<title>Build Camera API for iOS, Android & Web | Ionic Capacitor Camera</title>
8
8
<meta
9
9
name="description"
10
-
content="To take photos from the device's camera on a React app, begin by building it for the web, then make some small tweaks for mobile use on iOS and Android devices."
10
+
content="Add the ability to take photos with your device's camera using the Ionic Capacitor Camera API for mobile iOS, Android, and the web. Learn how here."
11
11
/>
12
12
</head>
13
13
14
-
Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
14
+
Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
15
15
16
-
To do so, we will create our own custom React hook that will manage the photos for the gallery.
16
+
## Photo Gallery Hook
17
17
18
-
:::note
19
-
If you are not familiar with React Hooks, [Introducing React Hooks](https://react.dev/reference/react/hooks) from the official React docs is a good resource to start with.
20
-
:::
18
+
We will create a [custom React hook](https://react.dev/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) to manage the photos for the gallery.
21
19
22
20
Create a new file at `src/hooks/usePhotoGallery.ts` and open it up.
23
21
24
-
A custom hook is just a function that uses other React hooks. And that's what we will be doing! We will start by importing the various hooks and utilities we will be using from React core, the Ionic React Hooks project, and Capacitor:
22
+
Next, define a new method, `usePhotoGallery()`, thatwill contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera.
Our `usePhotoGallery` hook exposes a method called takePhoto, which in turn calls into Capacitor's getPhoto method.
69
-
70
46
Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `getPhoto()` - that will open up the device's camera and allow us to take photos.
71
47
72
-
The last step we need to take is to use the new hook from the Tab2 page. Go back to Tab2.tsx and import the hook:
48
+
Next, in `Tab2.tsx`, import the `usePhotoGallery` method and destructure it to call its `addNewToGallery` method.
73
49
74
50
```tsx
75
-
// Keep the other imports
76
-
77
-
// CHANGE: Import the usePhotoGallery hook
51
+
import { camera, trash, close } from'ionicons/icons';
Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
103
+
If it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
106
104
107
105
108
106
109
107
_(Your selfie is probably much better than mine)_
110
108
111
-
After taking a photo, it disappears. We still need to display it within our app and save it for future access.
109
+
After taking a photo, it disappears right away. We need to display it within our app and save it for future access.
112
110
113
111
## Displaying Photos
114
112
115
-
First we will create a new type to define our Photo, which will hold specific metadata. Add the following UserPhoto interface to the `usePhotoGallery.ts` file, somewhere outside of the main function:
113
+
Return to `usePhotoGallery.ts`.
116
114
117
-
```tsx
118
-
exportfunctinousePhotoGallery {
119
-
// Same old code from before.
115
+
Outside of the `usePhotoGallery` method definition (the very bottom of the file), create a new interface, `UserPhoto`, to hold our photo metadata.
116
+
117
+
```ts
118
+
exportfunction usePhotoGallery {
119
+
// Same old code from before.
120
120
}
121
121
122
-
// CHANGE: Add the interface.
122
+
// CHANGE: Add the `UserPhoto` interface.
123
123
exportinterfaceUserPhoto {
124
124
filepath:string;
125
125
webviewPath?:string;
126
126
}
127
127
```
128
128
129
-
Back at the top of the function (right after the call to `usePhotoGallery`, we will define a state variable to store the array of each photo captured with the Camera.
129
+
Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will contain a reference to each photo captured with the Camera. Make it a state variable using React's [useState hook](https://react.dev/reference/react/useState).
When the camera is done taking a picture, the resulting Photo returned from Capacitor will be stored in the `photo` variable. We want to create a new photo object and add it to the photos state array. We make sure we don't accidentally mutate the current photos array by making a new array, and then call `setPhotos` to store the array into state. Update the `takePhoto` method and add this code after the getPhoto call:
141
-
142
-
```tsx
143
-
// Same old code from before.
140
+
Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `userPhotoGallery` return statement with the `photos` array.
Next, move over to `Tab2.tsx`so we can display the image on the screen. With the photo(s) stored into the main array we can display the images on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the Photos array, adding an Image component (`<IonImg>`) for each. Point the `src`(source) to the photo’s path:
220
+
Next, switch to `Tab2.tsx`to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos`array. For each item, add an [Image component](../../api/img.md) and set its `src`property to the photo's path.
0 commit comments