1 00:00:02,310 --> 00:00:09,000 So let's start with configuring this. Here, launch camera async is the function we call to open the camera 2 00:00:09,570 --> 00:00:13,310 but actually there, you can configure quite a bit. 3 00:00:13,340 --> 00:00:19,920 If you pass an object here, you've got a couple of options you can set and of course the official expo 4 00:00:19,920 --> 00:00:24,520 docs for the image picker are the place to go to learn all about these options. 5 00:00:24,600 --> 00:00:26,930 Now the default settings actually are quite fine 6 00:00:26,940 --> 00:00:32,940 but for example here, you could add allows editing and set it to true to get a basic editor which allows 7 00:00:32,940 --> 00:00:37,560 you to crop the image for example and that's actually something I will enable here. 8 00:00:37,620 --> 00:00:44,040 You can also set a specific aspect ratio where you want to log in, like 16:9 which will be taken 9 00:00:44,040 --> 00:00:46,850 into account in your editing mode. 10 00:00:46,890 --> 00:00:52,680 You can also set if you want a base64 string instead of a file or in addition to the file I should say, 11 00:00:52,920 --> 00:00:57,570 which means that you get a text string that represents your image, which is quite large though and 12 00:00:57,570 --> 00:01:04,190 I'll not do it here and you can also control the quality and there, I will set the quality to 13 00:01:04,200 --> 00:01:04,740 0.5, 14 00:01:04,740 --> 00:01:09,780 this should be a value between 0 and 1 where one is the highest possible value 15 00:01:09,870 --> 00:01:13,350 and of course this also impacts the image size thereafter. 16 00:01:13,380 --> 00:01:17,030 So you want to pick a size or a quality that makes sense for your app. 17 00:01:17,040 --> 00:01:23,490 If you're only using the image as a thumbnail, you might not need super high res images. With that, 18 00:01:23,490 --> 00:01:28,050 this is configured and the question of course is, how do we get access to the image that was taken? 19 00:01:28,950 --> 00:01:32,520 Well remember that this is a promise or that this returns a promise. 20 00:01:32,550 --> 00:01:33,570 Well of course therefore 21 00:01:33,600 --> 00:01:41,050 we can await that promise and the result we get back after the promise resolved indeed is the image, 22 00:01:41,130 --> 00:01:47,340 so we can just store this image in a constant. An image is now an object with various pieces of information 23 00:01:47,340 --> 00:01:48,840 about the image that was taken. 24 00:01:49,590 --> 00:01:53,230 So here, we can console log image to see what's in there. 25 00:01:53,250 --> 00:01:58,150 Let's save this and test it on Android. There 26 00:01:58,160 --> 00:02:05,930 if I now go to this new screen here, take an image and I take this image with this dummy simulator 27 00:02:05,960 --> 00:02:06,460 camera I 28 00:02:06,470 --> 00:02:09,170 get here and I confirm this, 29 00:02:09,200 --> 00:02:16,760 now I go to this cropping or to this editing tool because I enabled editing, here I have this 16:9 30 00:02:16,880 --> 00:02:22,050 format thing which I can move and by clicking on crop, I can now select this 31 00:02:22,250 --> 00:02:27,280 and if we now have a look at the console, we see that this is the object we got back. 32 00:02:27,440 --> 00:02:32,930 It's an object with a canceled field which tells us that this was not cancelled but that we did take 33 00:02:32,930 --> 00:02:33,470 an image, 34 00:02:33,470 --> 00:02:37,880 so this is a field we can check to find out whether the user did take an image or whether the process 35 00:02:37,880 --> 00:02:38,700 was cancelled. 36 00:02:39,290 --> 00:02:41,330 We get the height of the image and the width, 37 00:02:41,570 --> 00:02:49,310 we get the type which is image and the URI, so a link to the image file. 38 00:02:49,310 --> 00:02:53,570 Now this is in a temporary directory which is cleaned up automatically periodically, 39 00:02:53,630 --> 00:02:59,830 so of course it's not the storage or the path where you want to permanently store that 40 00:02:59,840 --> 00:03:04,010 and we will actually move it later with the filesystem API 41 00:03:04,670 --> 00:03:06,740 but for now, this is something we can work with. 42 00:03:06,770 --> 00:03:16,840 So to output a preview, we can manage some state here in the image picker by importing use state and 43 00:03:16,870 --> 00:03:24,150 then initialize it up there, use state can be called here 44 00:03:24,510 --> 00:03:33,840 and of course I get back some data here and that is my picked image and a set picked image function 45 00:03:33,870 --> 00:03:36,740 as you're used to from use state 46 00:03:36,810 --> 00:03:39,160 and now we can utilize that here. 47 00:03:39,240 --> 00:03:44,340 Here I want to set the picked image to image.uri, 48 00:03:44,360 --> 00:03:46,550 so to that link to my image, 49 00:03:46,590 --> 00:03:53,910 so that path as a string to my image and the cool thing is this path can be used with the image component, 50 00:03:53,940 --> 00:03:57,830 it works with the image component without any special configuration. 51 00:03:57,840 --> 00:04:02,160 So there, we can add source and now we need to set this to an object with this 52 00:04:02,160 --> 00:04:08,800 URI property. Thus far in the course, we use that to point at network images, 53 00:04:08,820 --> 00:04:11,130 well you can also point at local images, 54 00:04:11,130 --> 00:04:13,770 so here we can point at picked image. 55 00:04:13,980 --> 00:04:18,700 Of course this only works if we have a picked image which only is the case after we use the camera, 56 00:04:19,140 --> 00:04:23,940 so now we can add an if check here or a simple ternary expression where we check if picked image is set 57 00:04:24,590 --> 00:04:31,770 and if it's not set, hence the exclamation mark, I show this fallback text, otherwise with the colon here, 58 00:04:31,890 --> 00:04:38,820 I set the image and now we have this conditional output and therefore now if we save that and this hence 59 00:04:38,820 --> 00:04:42,640 restarts on both devices, on both simulators, 60 00:04:42,660 --> 00:04:50,290 if I go to Android and I take my image here, of course this camera opens unsurprisingly. We can confirm 61 00:04:50,290 --> 00:04:51,490 this, 62 00:04:51,490 --> 00:04:56,230 choose our image, crop it and now we see it here in the preview, 63 00:04:56,230 --> 00:04:59,700 so that's now our image getting used. 64 00:04:59,890 --> 00:05:05,310 And with that, it's of course time to add it to the place which we can add by clicking the save place button 65 00:05:05,650 --> 00:05:08,350 and it's time to add some spacing between these two buttons I guess.