Selecting Photos with Expo ImagePicker

[00:00:00]
>> Kadi Kraman: So next up, what would be handy is if we could store the plant's photo along with its details. So if we scroll down, this is what we want to achieve. So we would like to have a plant image here that we could pick, and we could save in our local storage or in our storage in our file system.

[00:00:21]
Yeah, we would like to have a plant image here that we could pick that to go with the plant's name, so that would be a little bit more useful than our placeholder image. So for this, we're going to use the Expo ImagePicker library, and this provides access to the system UIs for selecting images and videos from the phone's library.

[00:00:42]
And you can actually also use it to take photos. So if you want to update this to take photos, there's some additional instructions here, we're going to just use the picking an image from the gallery for now. But one thing to know that if you are using the camera, then you need to request permissions first.

[00:01:02]
So there is a useCameraPermissions hook, and I think this should be a requestCameraPermissions. So before you get access to the user's camera, you need to actually request access and you get this native prompt from the user going like. Asking them whether they consent to their camera to be used and then hopefully they say yes and they grant permission and then you can use it.

[00:01:28]
So for the ImagePicker, so selecting images from the phone's library, you don't actually need this permission prompt, so we'll keep it simple and use that for now. So let's npx expo install expo imagepicker, I will npx expo start to start my bundle again, yeah.
>> Kadi Kraman: Okay, so what I'd like to do is when the user taps on this Plantly image, you can make this UX a little bit better to actually say a highlight of like student image, but let's keep this info.

[00:02:15]
So when a user taps on this plant in the image, it will open the image gallery and they could choose an image. So let's go to our new screen.
>> Kadi Kraman: And for this Plantly image, let's wrap this in, [COUGH] let's make this pressable. So let's use a touchable opacity here instead of a view.

[00:02:44]
>> Kadi Kraman: And whenever I do use touchable opacity, I tend to change the active opacity because I find this a little bit too intense, so let's do active opacity 0.8. I think that tends to look a little bit nicer, a little bit. No, I accidentally took a picture.
>> Kadi Kraman: And let's add a handler function here as well.

[00:03:21]
Let's do a handleChooseImage, and this will be an async function.
>> Kadi Kraman: And when we press on here, let's do onPress, handleChooseImage.
>> Kadi Kraman: So first thing we'll do is, we are not going to implement this for the web for the time being. So let's just do if platform,
>> Kadi Kraman: OS is the web,
>> Kadi Kraman: And we will just return out of it, otherwise, we want to launch our ImagePicker.

[00:04:14]
So let's import * as ImagePicker.
>> Kadi Kraman: from expo-image-picker,
>> Kadi Kraman: And in our handleChooseImage, we want to launch the image library. So let's do const result, so the result will be the data, so the image URI.
>> Kadi Kraman: And we will do await, so this is an async function, and we will launch, sorry, ImagePicker, and we will launch image library async.

[00:04:59]
>> Kadi Kraman: And we can also pass in some properties. So mediaTypes, what are the kinds of things that people can add here? So we don't want them to choose a video, so let's just say that we want ImagePicker, mediaTypeOptions, images. So we have an option for images, videos or all.

[00:05:20]
So in this case, we just want images, launch that, so allowsEditing, so this allows the user to crop the image. So when they open it from the image library, they can also crop the image to the specified size. So let's enable that, cuz that's fun. Aspect, so this, I think it only affects Android, and you can set the aspect ratio for the image that you're picking.

[00:05:50]
So let's do just 1, so it's a square image, and quality. So I think this is probably from 0 to 1. Yeah, so we want maximum quality, so let's go for 1. So let's just console.log the result and see what we get.
>> Kadi Kraman: So here, I'm on a simulator, so I have these beautiful pre-filled images, and I'll choose this, and there we go.

[00:06:24]
So I have, this result has an asset array. Actually, everyone has their preferred console logging method. If I do a JSON, let's do JSON, stringify, and pass this result null. Has anyone ever used this function here to do anything other than passing null? I have not. So let's render this a little bit better.

[00:07:00]
>> Kadi Kraman: Let's use this image, there we go. So we get an object that has a key for assets, and then assets is an array of images. So this object has a URI, which is the location of the file in my kind of cache folder. So this is important as well, so this file that we're picking, so this isn't permanent, this is just a cached file, but we can use it while the app is running.

[00:07:35]
Let's add a useState here for the image URI, so imageUri, setImageUri, and this will be a useState string, and it can be undefined. It starts off being undefined. And let's do if result is not canceled, if it's not canceled, then let's do setImageUri, and this will be results.assets, and we'll just take the first asset and its uri.

[00:08:24]
>> Kadi Kraman: And now we want to update our Plantly image to be able to render an image by URI instead. So this component, let's parse an image URI. And go into the PlantlyImage component, update the prop, so we can have an optional image URI, which is the string, and destructure it.

[00:08:51]
And so in the source, we can do, if the image URI is provided, then it will be an object with URI being the image URI. And then otherwise, we render our Plantly placeholder.
>> Kadi Kraman: So let's try that.
>> Kadi Kraman: There we go, that's updated. I think this looks a little bit big now, my plant image had a lot of opacity, so let's add some styles to add some padding.

[00:09:35]
So maybe on the image, let's add a borderRadius.
>> Kadi Kraman: 6, okay? And I can't actually add, or rather, I don't actually want to add any bottom padding on this image component because it would then also affect other places where it's used. So I think I'll add some padding here in the PlantlyImage instead.

[00:10:08]
>> Kadi Kraman: So this touchable opacity, I mean, this style is called centered, but I'm just gonna go with it and add a little margin bottom of, let's say, 24.
>> Kadi Kraman: There you go, just go around some space between them.