Before we continue on and start building out the PostFormScreen, I want to take one guide and take a deeper dive into what our PostImagePicker is doing. I think it would be a bad job on my side as an instructor if I didn't walk through this component a little bit more because it's doing a lot of work. It has all kinds of responsibilities. It's checking to see if a user has selected or has given camera permissions, it is setting state, it has an image component, it's passing data back up to a different component, and it's even working with different platforms, so let's take one guide where we simply walk through exactly what's happening here so that as we move forward, it's going to start to make sense to you, and also, one thing that I've noticed with the PostImagePicker or really working with this entire process is that is if you can understand this component, you are going to be able to understand a lot of other connected types of ideas, and concepts when it comes to React Native, and how Expo works.

So I think this is worth our time. So first, let's take a look at the dependencies one by one, and see why we need each one of these. That's a great spot to start when you're trying to learn a little bit more about a library, especially something that was in the documentation. So we know that we need to import React because this is a React application.

Now, we're using useState and useEffect. That right away tells me that we have some data that we're going to manage for this component, useEffect tells me that we are going to have some automated triggers that are going to happen. So that's also important to think about.

Now, for the components, we have a Button component, which tells me we're looking for some type of press handler. Than an Image and a View tag. Now, once we start adding our own styles, we're going to refactor this a little bit. We're not going to use a Button component. I'm going to show you how we can use an icon that'll function like a button. So that'll be pretty cool.

Then we're using the ImagePicker library itself from expo-image-picker, which you've already dug into that documentation. Then we're using Constants, which you're going to see We've talked about Constants for the status bar height, but you're going to see some other helpful uses for how Constants work, and then lastly, we're bringing in the permissions. So I had you already dive into things like the permissions in that documentation earlier on, so since you already did that, I don't want to really go into it a ton more because you already spent quite a bit of time with that, and then from there, we already defined our interface, and we talked about what that interface does. The entire job of our prop of setPostImage is that it gives us the ability to communicate the data that we're getting, which is specifically the path to that file, and it allows us to pass that back up to the PostForm or any other component that calls it. That's one really neat thing about this PostImagePicker. Imagine a scenario where this is a much larger application, and you want the ability to pick some type of image out from a camera roll in a different part of the app. You can call this exact ImagePicker library right here, and all you have to do is pass in a function that will listen for a string to be passed to it, and then it can do whatever it needs to do.

[Capture #1 [3:36]]

So that's kind of neat too. So moving down, we already defined what the props were and now we're setting the image. So here, this is going to be the check to see, okay, this is this data point of this image file that we're going to work with, and then for there, this is where we start to get into something that maybe you've never really looked into before except through the documentation where we're saying getPermissionAsync. So right away, that name's pretty nice and descriptive. It says right away we're going to get permissions but added onto it is the word Async so that's kinda helpful. Whenever I see Async, the Async name and a function, what it tells me is that this is an asynchronous process which means it might take a moment to happen, just like getting the post from the API or checking to see if the user is logged in.

So that already tells me two things about this function. Now, if we dive into this function a little bit more, where it says getPermissionAsync, and you can see that we've defined this as an asynchronous function, here we're checking to see if the platform is iOS. So this is something that's very important for you to know as a mobile developer working with Expo and React Native. A very neat thing about working with Android is Android gives you access to all of these permissions by default. So that's the reason why we're not checking to see if this is working with Android or not, or if we have those permissions or not because by default, we already have access to the camera roll in Android. It makes it really nice but as you can see, when it comes to working with iOS, we don't have those permissions, and we need to ask for them.

So we're saying if Constantsplatformios, this is a very helpful function if you ever have to write some code that is specific to either iOS or Android, you can always ask in the code by accessing these Constants and what that's going to do is it's going to recognize the phone that you're working with.

So if you're on an Android phone, all of this code is going to be skipped right there so that's kinda cool. Next is we're grabbing the current status. So we are saying await, so we're going to check and see, this is kinda like we do with the secure store token. We're going to wait and see okay, do we have the permissions? We're going to call the Permissions library, and we're going to askAsync which means we are going to make a request, and then we're going to wait for the response, and what we're doing is we're saying I want to see if I have the CAMERA_ROLL permission? Now, this could be any other type of permission. If you go into the Permissions library for Expo, what you'll see is you can ask for anything. You can ask for permissions for their location, and for a camera, right now we're just getting the camera roll. You can do the camera itself, and there are all kinds of different things that you can ask for. Right now, we're checking to see in the list of permissions, so we have the ability to or see if we have the status granted ability to access the camera roll. So what it's doing is it's saying okay, right now, I want you to check, do we have access to the camera roll? If not, what we're going to do, so if the status is not granted, we're going to say sorry, but we need the camera roll permissions to make this work.

That's a pretty standard response and then in a larger app, what you do is you'd ask them once again for those permissions. So let's move down. So that's what we do to see if we have those permissions or not, and also, one last note, askAsync means we're asking, so this is where we actually check to see if we're getting the permissions or we're asking for them. Now, let's move down, and so with pickImage right here, this is where we have a try or catch block What this is doing is this is just adding a little bit of error handling into our application. So this means that if an error occurs here, the application isn't going to crash. It's just going to console.log out the error right down here. That's what a try-and-catch block is if you haven't spent a lot of time working with this. So the very first thing we're doing is we're capturing the result. We're going to call the ImagePicker library, and then we're launching the ImageLibraryAsync. What that means is that the ImagePicker module has the ability, it's wired up directly into the device, and when this is activated, so when we click PickImage, this is going to be called and then this is going to launch the camera roll library. That's all that's happening. I know these are some kind of confusing words if you've never seen them before but that's why I wanted to walk through this to walk through exactly what is occurring here. Now, what this is is a function and it's allowing for all media types. Then it allows for editing true. What that means is if you noticed, whenever we hit and selected an image, we were able to kinda drag and drop it, and move it. That's what allowEditing true means. Then we give the aspect ratio and then the quality. So you can see that we have some nice options, and I'm just going with the default ones for this application. Definitely look through this entire function for your own applications because you may need to change that.

You may want the aspect ratio to be a square, or you may want to change the quality to compress it, or you may not want to allow the user to edit, or you may only want to allow certain media types. Those kinds of things. So that is what is happening here. Now, we also check to see, 'cause if you remember, when you press that button, and I can open up the simulator right here and we can mimic this, so when we press this button, then you'll see it's going to pop up the ImagePicker. Remember, we have this Cancel ability. Well, that's what this code's doing right here.

[Capture #2 [10:11]]

It's listening to make sure that we didn't hit Cancel. Because if we did, then we don't want anything to happen because then we don't have an image to work with So that's what it's checking. Now, if the result is not canceled, which means that we do have access to an image, we're setting the local image. That is what allows that image to populate right there on the screen. We're setting the local image with the URI value, which we know is the path to the image, and then we're also passing up to our PostForm that URI because that's what we're going to need to send to the API, and then we just have some console.log statements here at the end.

Now, moving down, right now this View tag is pretty basic. We're going to be changing this up when we get to the spot where we actually want to style this and make our form look nice. For right now, it's just a pretty standard View tag. Everything's centered using Flexbox, and then we have a button that says Pick an image from the camera roll. And then we have an onPress handler. What we're going to do is when we add our own styles, it's going to look pretty cool. We're going to instead of saying Pick an image from the camera roll, we're going to have an icon that is wired up to a touchable opacity component. You can click on that icon, and you're going to get exactly the same behavior here where you're able to go access the camera roll. If that gets replaced or if we do add an image, the icon's going to go away, and it's going to be replaced by a clickable image. So you could have a user that comes here, and they type the name of the meme, and they type in their description, they pick it out, and then later, as they're still saving it or before they say it, they're going to say you know what? I have a better version of this meme. They can click on the image, replace it with the other one, hit Save, and then the updated meme is the one that would get uploaded to the server.

So that is everything right there. We're at the very end, we're simply checking to see if there is an image and if so, we're passing that into our image component with some base styles. We're going to be replacing everything right here when we get to the style portion of this component, but hopefully, that starts to make a little bit of sense. If it was fuzzy at all on how this particular component was working, whether it was how it worked with permissions or the camera roll or any of those kinds of functions that maybe you've never seen before outside the documentation, hopefully, they're starting to make a little bit more sense now.

Now, with all of that in place, and hopefully with a little bit more clarity, we can move on to our PostFormScreen.

Resources

• Source code