So let's start with configuring this. Here, launch camera async is the function we call to open the camera
but actually there, you can configure quite a bit.
If you pass an object here, you've got a couple of options you can set and of course the official expo
docs for the image picker are the place to go to learn all about these options.
Now the default settings actually are quite fine
but for example here, you could add allows editing and set it to true to get a basic editor which allows
you to crop the image for example and that's actually something I will enable here.
You can also set a specific aspect ratio where you want to log in, like 16:9 which will be taken
into account in your editing mode.
You can also set if you want a base64 string instead of a file or in addition to the file I should say,
which means that you get a text string that represents your image, which is quite large though and
I'll not do it here and you can also control the quality and there, I will set the quality to
0.5,
this should be a value between 0 and 1 where one is the highest possible value
and of course this also impacts the image size thereafter.
So you want to pick a size or a quality that makes sense for your app.
If you're only using the image as a thumbnail, you might not need super high res images. With that,
this is configured and the question of course is, how do we get access to the image that was taken?
Well remember that this is a promise or that this returns a promise.
Well of course therefore
we can await that promise and the result we get back after the promise resolved indeed is the image,
so we can just store this image in a constant. An image is now an object with various pieces of information
about the image that was taken.
So here, we can console log image to see what's in there.
Let's save this and test it on Android. There
if I now go to this new screen here, take an image and I take this image with this dummy simulator
camera I
get here and I confirm this,
now I go to this cropping or to this editing tool because I enabled editing, here I have this 16:9
format thing which I can move and by clicking on crop, I can now select this
and if we now have a look at the console, we see that this is the object we got back.
It's an object with a canceled field which tells us that this was not cancelled but that we did take
an image,
so this is a field we can check to find out whether the user did take an image or whether the process
was cancelled.
We get the height of the image and the width,
we get the type which is image and the URI, so a link to the image file.
Now this is in a temporary directory which is cleaned up automatically periodically,
so of course it's not the storage or the path where you want to permanently store that
and we will actually move it later with the filesystem API
but for now, this is something we can work with.
So to output a preview, we can manage some state here in the image picker by importing use state and
then initialize it up there, use state can be called here
and of course I get back some data here and that is my picked image and a set picked image function
as you're used to from use state
and now we can utilize that here.
Here I want to set the picked image to image.uri,
so to that link to my image,
so that path as a string to my image and the cool thing is this path can be used with the image component,
it works with the image component without any special configuration.
So there, we can add source and now we need to set this to an object with this
URI property. Thus far in the course, we use that to point at network images,
well you can also point at local images,
so here we can point at picked image.
Of course this only works if we have a picked image which only is the case after we use the camera,
so now we can add an if check here or a simple ternary expression where we check if picked image is set
and if it's not set, hence the exclamation mark, I show this fallback text, otherwise with the colon here,
I set the image and now we have this conditional output and therefore now if we save that and this hence
restarts on both devices, on both simulators,
if I go to Android and I take my image here, of course this camera opens unsurprisingly. We can confirm
this,
choose our image, crop it and now we see it here in the preview,
so that's now our image getting used.
And with that, it's of course time to add it to the place which we can add by clicking the save place button
and it's time to add some spacing between these two buttons I guess.