- Read Tutorial
- Watch Guide Video
This is going to be a really fun guide, because in this guide, we're going to extend our posts item so it can actually render images. So let's get started with that. We're going to install a new dependency called react-native-auto-height-image. Now before we go in and we install it, I want to talk about what it is and why we're using it. So if you look at the react native documentation, you could say react native image. You'll see that react native has a regular built in image component and it works great
[Capture #1 [00:41]]
There's one little issue with it though, and that is that you have to tell it the height and width that you want it to be. Now we know the width because we want our images to go from one side of the screen to the other. However, we allow for a variable height, so we're not like the way Instagram was when they started. If you remember when they started, they only allowed for square images and it was part of the reason for that was because they didn't want to deal with the kinda thing that we're going to walk through in this guide and that is they didn't want to have to deal with how they could construct or pre construct the image and have a variable hype for any kinda width that the screen was.
So that can be a little bit tricky and in certain cases you really need to be able to perform this task dynamically, which is what our react-native-auto-height-image component is going to do for us. I will use just to help you try to decide when you'd want to use one or the other. If I'm working with an API that sends me not only the image URL but also sends me the height and width, then I can perform a calculation and I can have my own dynamic image component and use the standard image in a best world's best case world scenario, that's what I would try to do, but if you do not have the image, height, and width as you get started or as the API sends you the data, that can be a lot trickier to do, and so that's a reason why we're going to use this component. So let's get started, and I'm going to add this as a dependency.
[Capture #2 [2:30]]
So we'll say yarn add react-native-auto-height-image and I'm just going to stop. I'm going to open up the terminal and I'm going to stop that and let's just install that. So I'll say yarn add, and yarn's going to go out, and it's going to get this dependency for us. So let's make sure everything works, and it all looks good.
Now I'll type expo start, and that will start it back up. As you can see, we have a slightly newer version of the expo CLI offline, I will perform that update as I have before and it looks like our build is working properly. We open up the simulator, we'll see if it works I can click dismiss all hit refresh. And sometimes this happens where the simulator doesn't really seem to like stopping, and then starting again if the server's stopped.
So I'm just going to quit out of that, and start up the simulator again, just so we can make sure we're working with the newest version of the code, and it's picking up on the server changes, and those kinds of things. So let's let that get started, and as we do, I'm going to open up visual studio code and go to our PostItem.
[Capture #3 [3:46]]
Okay, that's good. It looks like everything there is working. So now we know that we need to use that new auto height image component. Well, let's grab from the documentation their example. So right here on NPM, and I'll provide this link in the show notes. They provide a pretty basic example. As you can see, we're simply going to import auto height image, and then, from there we're going to define the width, and then pass in the image.
Now they give you a couple of different options and if you're curious on what these two options are, the first option is if you have a static image inside of your project file itself. So kinda like working with the logo that we have. So you could do that here, but I've never had to use that, and the reason for it is because if I have an image in my asset pipeline, I already know the height and with, I don't need the component to do that for me, but here, I want to use a URI. So this is what we use when we want to pass in a full path to the image.
[Capture #4 [4:56]]
So that's what we're going to to do. I'm going to first import it. So let's copy that import statement inside of our PostItem.
[Capture #5 [5:04]]
Let's call the auto height image Let's place that right above the text
[Capture #6 [5:13]]
So here I'm going to import that, and then you can see that this is giving us a little error. Let's see why that is. So let's see, we have AutoHeightImage, auto height, image I guess that maybe, let's see, I guess that it doesn't have a type associated with it.
So there are a few ways around that when you get this kind of error. So the very first thing that we can do is we can create a render for this auto height damage. So I can come up here, and I can say const image just like this, and I can even make this just a regular function.
So I'm going to make this a fat arrow function, and then, I'm going to say, I want you to return this code right here. So I'm going to pull all of this in here, and I can say, I want you to return this, and then the nice thing about this is up top I can use what is called the ts-ignore, and let's see how I can call this. The tricky part with ts-ignore it has to be directly above. So there we go.
[Capture #7 [06:27]]
Okay, so now we've gotten rid of the error, and now we can just call this function right here. So let's do this. I'm going to call this function of image. Hit save, and let's see if this is working for us. Hit refresh, and there you go.
We have a set of placeholder images
[Capture #8 [6:50]]
Okay, so let's walk through, before we even get into adding our own code, let's walk through what had to happen there because that was a little bit of debugging, and so I want to explain what we're doing because this is exactly, and what I would do if I were building this out as my own application, and I ran into that type of bug.
So what's going on? Well, auto height image because of that air that we saw Let's take off this ts- again, and let's read this air. So it says no overload matches this call. Overloads one and two, and then it provides each one of those props It says that animated is missing, and so right there, if you go and look at the documentation, you can see that we have a few other options with props, and we have this animated one.
Now it's saying that it's not required, but for some reason, TypeScript is thinking that it is. So because of that, sometimes you're going to run into issues where TypeScript tries to do a little bit too much, and it will throw an error. When you run into that type of scenario, what you can do is you can type slash slash at ts-ignore, ts dash ignore, and then what that does is that tells TypeScript, hey, the next line of code that you're going to see, don't try to do anything with it. You're still going to process it, but don't try to stop it from running. If it happens to go and do an error, just ignore it, and as you can see that still worked properly.
From there, I stored that all in a function, and the main reason for that is because I don't really like to place ts-ignores directly inside of the JSX. It can get a little bit hard to read and confusing. You want to be careful with ts-ignore. So I'm going to use this with the caveat that if you start to just throw out these ts-ignores every time that you see some type of TypeScript warning or error, you are really not going to enjoy working with TypeScript because it kinda kills the whole reason why we're using it. It should only be used when you're working with an outside dependency that maybe doesn't have a set of types, and that is when you can do that just so that the compiler will run, and won't throw any errors. Okay, so with all that being said, now let's actually build this out. So this image function is using this placeholder. We want it to use our URL. So the way we can do this is let's add to our list of extracted elements.
So I'm going to say name and now I also want the post image URL, and now we can use this right here. So instead of place older, we can say we want you to use the PostImage URL, hit save, and then let's go take a look at the simulator. You might have to hit refresh, and it looks like it's having some issues today. Let's see.
We can try to go back to it, and nope, we're going just to quit out and open it back up again, and I keep all of these little issues and these errors inside of the course because these are the kinds of things as I'm building out my own applications, I run into these on a regular basis, so I want to mimic exactly the kinds of things that I work with so that it's not a surprise when it happens to you. Okay, so there we go.
We have our memes, and they are all rendering there nicely. You can see it's in a scroll view All of that's working perfect, but as you can see, it's making them pretty narrow. Why is that?
Well, that's because if you look at the code, we said that we want auto height image to have a width of a hundred, but that's not ideal. What we actually want is the image to go from one side of the screen all the way to the other side. Thankfully react native has a really helpful component called dimensions. So if you go up top to the import statement, type dimensions, and then copy that come down to width, and what we can type is dimensions dot, and this is where TypeScript comes in really handy. It is going to tell us all of the functions we have available. So dimensions has the ability to call get, and you can definitely read all that documentation. I will tell you that that's the function that we want. So as get dot, and then from there we want to have. Trying to think of what we won't forget, we forget, we want to do the width. So get is a function, and we want to do the window width just like this, and just so you know, I love using TypeScript, and their auto complete. I do that a lot.
If you have any questions whatsoever, the best thing to do is to copy that component, go in to the react native documentation and simply search for it. So, and a lot of times, the fastest way of doing it is to just type react native dimensions, and it'll take you right to that piece of the documentation, and as you can see right here, it has all of the example code right there. So dimensionsget pass in a string of window, and then height, that's going to give you from side to side the width of the screen that it's on. So let's open that back up. So that's exactly what we're doing here. I'm going to hit save, and let's see what's doing now.
Okay, this is looking really nice. Look at that. We now have all of our images going from top to bottom, and they're going from side to side, and notice also that we have, the height is perfect. So even if a user uploaded something that isn't very tall, so it is fully wide but a little bit just not quite as tall, it would actually render just that image. It wouldn't distort it, and it wouldn't change the aspect ratio or anything like that. It's going to have the image go from side to side, and then whatever the relative height is, it's going to do that for us automatically. That would be very hard for us to write that code on our own with the native image component. So that's the reason why I like using it in cases like this.
So this is looking fantastic.
[Capture #9 [13:35]]
I'm happy with how this is coming along. Now that we have our images rendering properly. In the next guide, what we're going to do is we're going to start applying our own styles to the feed into our post item.