- Read Tutorial
- Watch Guide Video
Now that you have those dependencies installed and hopefully you're a little bit more familiar with the documentation and what these types of libraries offer, in this guide, we're going to build out our ImagePicker. So let's get started. We're going to start off by simply following the same pattern that if I were working with this library for the first time ever, this is exactly what I would do. I would go through the documentation and I would take their Example Usage and I would just copy and paste it exactly from scratch. So let's do that.
So I'm going to just take all of this and I'm just going to copy this. And let's open up Visual Studio Code and the simulator. So now, I have the PostFormScreen open, I'm not going to put it in here. I'm going to create a dedicated component. So let's go into our components directory and you can see we have components and then we have posts. So we already have a good directory for this so I'm going to in the post directory, I'm going to create a component here called the PostImagePickertsx, and now let's just paste all of that in.
Now because the code that they wrote was made for vanilla JavaScript, there are going to be a few little errors and they're related to TypeScript, so let's just go through those and take care of those before we do anything else. So I'm going to hit save here. It's going to get reformatted and then if I scroll down, you'll see I think, yeah, it looks like we only have one TypeScript error. If I hover over it, it's says property uri does not exist on type ImagePickerResult. Property uri does not exist and so that's just a TypeScript thing. Let's for right now, just to get this up and running, let's add a @tsignore and that'll take care of that and then later on we'll fix it and we'll see exactly why it's calling that. So I'm going to hit Save here. You can see that we have a few consolelog statements. So our results should get logged out in the console.
So let's test this out. I'm going to open up the PostFormScreen here and let's call our PostImagePicker so I'm going to import it so PostImagePicker. It looks like our auto adder is not working so let's import it manually so import PostImagePicker from /components/posts and then PostImagePicker. There you go and now let's just call our PostImagePicker I'm going to put this in a view just to give us a little bit of margin. So View. PostImagePicker. We're going to call it with no props or anything like that for right now. And for the View, I'm going to add style of marginTop, and let's just say marginTop of . Okay, hit Save.
Doesn't look like we have any errors. Now, if you click on the little plus icon here. This is going to take you to the forum and look at that. Right away it says Expo Would Like to Access Your Photos. And so now we can click OK and you can see our component here is not taking up, we don't have enough room for it. So for the View tag here, lemme just say View and then give it a height so here I'll just say height of % We'll add all of our own styles later on and same issue. Let's also add a height here. So let's add a height of . Hit Save and there we go. This is all just to see how it's working.
This is exactly the same flow that I would follow if I were teaching this to myself and that's what I wanted to try to replicate, not just in this guide but also in this course because what I'm showing you is not just how to build this one out, but I'm trying to teach you how you can build any type of app that you're ever asked to build and so I want to show you and kinda walk you through what my own personal flow is, and so it looks like so far we don't have any errors. Everything seems to be working.
So now it says pick an image from the camera roll. So I can click on that and sometimes, when I do that, nothing happens or it takes a second, as you saw right there, but now this is all working. So this is kinda cool, and now I can click on All Photos and it brings up other photos. So I can click on, let's click on one of these waterfall ones. I can do that and look at that, we have the ability to pick it, to zoom, to pick out the exact area that we want and now if I click on Choose, you can see now the image has popped up there.
[Capture #1 [5:10]]
This is all working really nice, and as you can see, we're able to just take the example usage code that Expo provided in their documentation and we have a really nice functioning image right now and an ImagePicker component. We're going to add our own styles, we're going to create our own listeners, we're going to customize it a little bit over the next few guides but for right now, this is really working great. So I'm happy with it. So great job if you went through that.
Hopefully it's working for you, and can also take a look at the console to check. Let's open up the terminal here and as you can see, right down here, this is the file.
[Capture #2 [5:50]]
So if you remember, there were some consolelog statements inside of our ImagePicker. So when you pick the image, the result right here is getting stored in the image value and then we are consolelogging that result. This is what is getting consolelogged.
[Code-Block #1]
So you can see that it has a few attributes. We have a height, we have a type of it, it's a type image, then we have the uri, which means that is the path to the image on the local device. This is something we're going to be working with when we're passing it up to the server and then we also have a width.
So we have all of the attributes we need in order to send this up to the server. So we what we're going to need to work with it so this is functioning, everything is working, I'm happy with where it's at right now and in the next guide, we're going to continue to build out our PostFormScreen and then eventually, we're going to combine our post image with the form, we're going to style it up so it looks really nice.