Intermediate React Native Adding Local Images

[00:00:00]
>> There are various ways that you can add images to react native we're going to be looking at liquid images network images and vector icons the SPGs. So when I say local images I mean images that are within your app so you ship them with your app bundle.

[00:00:18] So these are things that like one of the things to be wary of is that if you have a very large image. You want to try to reduce it as much as possible so I usually use tiny PNG Yeah, I usually use this if, for example, your product team or your client gives you a bunch of images.

[00:00:44] I run them through here to minify them, to make them as small as possible. Because any local images that you add to your app, they will get shipped with your app bundle. So for example, if you have, I don't know, 20 images or one megabyte deeds that each that's like 20 megabytes extra.

[00:00:58] That every single user would have to download, just use your app, so that's something to be wary of. All right, so usually, you can pretty much put images wherever you want. But in interest of keeping our code base clean I usually create a new directory, so at the top level that's going into the source to here.

[00:01:20] That's going to source to here, and you follow that and it's called assets. So you can you can do assets, images, assets, bonds, so any kind of content that isn't code would go in here. So I have chosen an image for us to use already, so if you right click Save as, and then we will find our app.

[00:01:46] So mine is in project next mood tracker, and assets. So here is our image, so surprise, React Native has an image component, that you can import from React Native. And I'm gonna just render this image. Okay, so to add local images, we need to import the image path using require.

[00:02:17] So let's do const image source equals and we'll use require. And then, this will be the image pause, so app app assets butterflies dot PNG. Cool, and the reason we need to do that is for metroband to know where the images and also package it, we ship your app.

[00:02:47] So in image, so on the web, you would use source in [INAUDIBLE] just to make it a little bit more frustrating. Its source, the whole word and we're passing the image source. Now let's save this and see the image, now let's talk about the size of the image.

[00:03:12] So you can see that I didn't give it a width or a height but it has some default size. So the size actually comes from the image itself, so it will be in display points whatever this is. But whatever is compatible for this device. So now that we've rendered the image, let's actually put it in a thank you page.

[00:03:37] When the user has chosen an emoji and we've done this, let's flick to a version of this view that says. Thank you and like choose another, and then it has the little butterflies icon there. So if we go to mood picker. And let's add another state variable for whether we're in this I have selected state, so has selected [COUGH] Has selected And this is a React use state and we'll start with false.

[00:04:24] So here so just as a side note on TypeScript because we're giving this initial value. I don't need to explicitly say that's gonna be a Boolean type she will just know this. So for hover over this, it will say that it's a Boolean. So let's do if has selected, let's return early with a version of this container that has the thank you message and choose another.

[00:04:49] So I'm going to reuse the same styles for the container so we'll have to type them so let's do return. And this is a view and let's copy the button here the bottom pressable And let's say choose another and then on press, we want to just set have selected to false.

[00:05:20] And here's our handle select, we select the mood, we said it's undefined but also let's set has selected to true. Okay, so I think this should work, okay, cool. So we have this toggling and let's also move this image into a thank you page, so I'm gonna copy this image source, Move it in the new pickup.

[00:05:55] And also import the image. And let's render the image above here, so we'll do source and then, image source and I'm going to remove. We have it from the home screen, Great, so we have an image image but it's on the side on the left of the screen.

[00:06:28] So we wanted to be center, so I'll just add a quick style, so style start image. And in our style sheet let's create a new style for the image and we'll use line self center, excellent. So now we have this nice toggling behavior with a nice image. Now, I want to talk about is adapting to screen sizes.

[00:06:57] So one of the things you'd be wary of and for mobile phones, especially. Is that one pixel, when you do with ten, this doesn't mean ten pixels, it means ten display points. And then a display point is basically that relates to the pixel density so if you have retina displays on iPhone for example.

[00:07:21] They have three times the amount of precision on your images, which means that their pixel density is higher. This is create really beautiful user experiences for users, but as developers is kind of a nightmare. Because we need to provide images that are compatible for all the different sizes.

[00:07:41] So you might have seen file names before, that have 2x and 3x, like add 2x and 3x in the file name. And that's actually a convention for mobile, so here we have this image, that's the normal size. And then, I have two more which are 2x and 3x.

[00:08:01] If I save these surveyed, click Save image as and then save them both in the same assets directory. We'll have butterflies, butterflies 2x and butterflies 3x and what this actually does, so we don't need to change anything in our require. So we'll still go to butterflies to PNG.

[00:08:26] What will happen behind the scenes is that React Native will choose the correct file depending on your pixel density. So when you refresh, you have the correct file For the kind of pixel density you need. And then, you will basically have the right resolution file like based on the device.

[00:08:45] Which is an optimization thing we don't have to think about on the web. So as society images, by default, the image size will be based on the resolution of the main image. So even though we have 2x and 3x here, it will choose this as the reference point.

[00:09:00] And then, just these are for adjusting to the actual density and to resize the image, is actually on mobile devices. It's really nice to use aspect ratio so you can have either width or height and an aspect ratio. And then, you will adjust accordingly which is quite handy and also it will make sure it scales for different sizes of bone.