Network Images

[00:00:00]
>> Let's move on to the network images. So network images are images are loaded via URL, usually I think in my experience most of the images you'll be using in your app are loaded this way. Because you'll have an API request that has an image URLs and then you load the image.

[00:00:16]
So in order to render images from a URL just as here's an example. So I've got this image from Unsplash just a nice smoky background so let's add this as a background to our home screen. So I've got the home screen open. And I'm going to copy this URL All right so let's import image from React Native and I'm going to start by just rendering it inside the container.

[00:00:54]
Let's do image and source, now one thing to note is that if you have network images, images via URL, you can't just do this, this won't work. Source will have to be an object and you pass in the URL, which will be the image URL from the web.

[00:01:14]
Now when I save this, nothing actually renders and that's because this image isn't local, so iOS doesn't know how much space to give it to render so for images that you render via URL you always have to give a width and or height. So if I do style And just do width 100%?

[00:01:39]
And height 100, yeah, actually let's just do height 100. [COUGH] Vega, and we got our image. Now what I'd like to do is actually have this image in the background so that our content is overlaid on the image. So what I would like to do as a react developer is basically just do this and then move the route picker inside it.

[00:02:14]
Now this won't work because the react native image component doesn't allow you to put children inside it, so one way around it is to use an absolute layout. So let's put the image first and then move picker underneath it. And let's Yeah and they are both wrapped inside a container.

[00:02:44]
And then let's wrap the mood picker in a view And let's give this view an absolute fill. So we want this view to absolutely fill its content. So we'll do style and there is a convenience style in style sheet. So style sheet dot absolute fill. So if we look over this, look into it, I'd actually just position absolute top zero, bottom zero, left zero, right zero.

[00:03:13]
So you don't have to type it out. Cool, so let me just remove this height and give this image a flex one. Okay, so in the view that's around the mood picker, we'll turn this into an array. And we'll do justify content center, cool. So now we have a container and this is basically if you need to display content over your image.

[00:03:47]
But you can't give the image children this is the way you do it. So you basically wrap a container around the image and then the content you want to overlay. Then you give the image, like render it the size or whatever size you need which means that this container will automatically be of that size and then so this is basically for the content we overlay and there will be add absolute fill here, which is positioned absolute and then filling the whole container.

[00:04:21]
So this will fill all of this container and then you can add anything in here, which will then be overlaid on top of the image. So, in react native if you don't want to do this there is actually a component called background image or image background. That's called image background which you can use instead so if instead of doing all of this, going to remove this and wrap this.

[00:04:57]
Whole thing into an image background. So let's do source. It has the same API as to image. It will do source, URI image URL. Now this works as well. But if you actually look into the React Native repository the tree into how image backer is implemented is actually implemented exactly how I just showed you, it just renders the image component underneath and absolutely overlays the content.

[00:05:31]
So why did I even go through like showing you how to do this. Well for production use, I don't personally use the image components from React Native. I think a lot of people don't because it doesn't have a lot of capabilities in terms of like caching and performance.

[00:05:47]
So usually, there is a component, there's a library called React Native fast image which is here, and I think this is what most people end up using in production. Well, it's very good for lots of images so if you have a little bit lots of images React directly to image component wouldn't be able to handle this, especially on Android.

[00:06:13]
And also it has some extra properties for caching and prioritizations, which we want to prioritize. We have lots of images to load and you want to prioritize some images and not others, then you can use that. And one of the reasons I wanted to go through how to overlay content, is because this fast image, it doesn't allow you to have children inside either.

[00:06:34]
So you would have to do the method I showed you earlier. All right, so lastly, I now feel like this little layout, it doesn't really show the content very much. So I wanna add some opacity behind there just to make it pop a little bit more. So if we open our mood picker and then go to where the container lives.

[00:06:57]
So here it is. Let's give it a background color of RGBA 000, so it's black and naught 0.2. Yeah, I think this looks a little bit nicer so you can definitely see where the area for the content lives. And just a quick note. So you can add RGBA values for colors.

[00:07:22]
So this is basically the red green and blue values. And then a naught 0.2 is the a value or the opacity, alpha value of the audio opacity. And the reason that I'm doing this, instead of using normal opacity is if I did background color 000, and then opacity, naught 0.2, then you see the whole content we'll have this opacity.

[00:07:54]
And obviously this is not what I want just the background to have this opacity, and that's why in this case I needed to use an RGBA value instead. And lastly if we find where the heading text is let's look at what the type is. Let's call it heading.

[00:08:15]
Let's just make this white. So color and theme color white. Okay, I think now this matches our little design