Now the good thing is of course you don't have to use this default width and height,
you can set your own. So you can give this image a style and I'll do this, here
I'll add an image property in the stylesheet and give this a width of let's say 80% of the parent
view, so 80% of this screen view, so 80% of the screen width therefore and maybe a height
of 300 pixels
and now we can assign this image style here to this image component by using the style prop there and
pointing at styles image like this and
if we do that now, we see that's way better and now the image fits onto the screen and is resized accordingly.
Now by the way, you can also control how the image is resized
if you define a width and height that doesn't meet the aspect ratio of the original image,
so if your width to height aspect ratio isn't the same as the image file and chances are that you
have a different aspect ratio,
well then you can set a resize mode here and this simply is a string where you can choose from different
options
and for example cover is an option where you will resize the image to keep its aspect ratio and fit it
into this box here. For contain, it's similar but for contain, it will not necessarily take the entire
box as you can see here,
here it contains the image and simply shrinks it so that it doesn't exceed the width and height of the
box we reserve for it. For cover,
it also keeps the aspect ratio but doesn't necessarily shrink the image to fit into this box, instead
it just the crops the image beyond the boundaries of the access it would exceed otherwise.
So we can simply play around with these different settings to get the setup you want,
cover is the default but in case you want to keep the whole image and you don't want to crop it on any
axis, then you could set this to contain and you can play around with the other values too.
I'll go with cover which again is the default,
so you could remove this prop here but to show that you can set this, I'll leave it here.
Now this allows you to add an image here on the screen and of course you can assign more styles,
for example we could try to give this rounded corners by now
also adding a border radius here and setting this to let's say 200, so really large border radius to
render a rounded image.
Now that's looking a bit strange though, a better way of setting this is to simply wrap the image into
a surrounding view like this and then assign the styles that should add rounded corners or drop shadows
or anything like that to that surrounding view.
So there you could refer to the image container prop or anything like that and add this down here in
your stylesheet and now on that image container, you could set up a border radius of let's say 200,
maybe also border width of 3 and a border
color of black
so that we also have a visual border
and if we do that and save this, we get this strange look. The reason for this is that we haven't set a
width and height on the container and therefore we should do this and actually use width and height
we were setting on the image, set it on the container instead and on the image, we can now simply use
a width of 100% and a height of 100% because the image is inside of this container,
so a 100% here and here means it takes the width and height
we're setting up on the container
but now the container also has these values so that the container is sized appropriately.
Now what you can see is something strange though, the image overlaps the container.
We see the rounded corners,
we see the circle here in the background, here with these black corners or edges here
but the image isn't cropped into that circle
so to say
and that can be achieved by adding another property on the container that holds the image
and that's the overflow property with the value of hidden.
That means that any child inside of the container that would kind of break out of the container, that
would go beyond the boundaries of that container is actually clipped, is cut off
so that now we actually squeeze the image nicely into that container with the rounded corners we got
here.
Now what we can also add in addition is a little bit of margin on the vertical axis,
maybe of 30 to have some spacing around the image top and bottom
and with that, this doesn't look too bad I'd say.
Now one thing you'll notice is that it's not looking like a perfect circle here on Android.
The reason for that is that our border radius isn't calculated perfectly,
the border radius should be half of your width and height
and the problem is width and height aren't equal,
so we should actually render a square here and then add a border radius to get a perfect circle.
So the solution could be that we set the width of 300 here on the image container and have the same width
as height
therefore and now use a border radius that is half of that which is 150 and now we'll
get a perfect circle on both devices.
This also means that on very small devices, our image here, our circle might not fit on the screen if
the devices have a screen that's smaller than 300 pixels regarding its width but we'll learn about tools,
how to find out which device width our device has and how we can adjust styles to that in the next module.
For now let's go with the hardcoded value here which looks good on these screens here and we'll again
cover tools that help us with other device screens later.
So this is how you can add an image and how you can style it, how you can make it rounded like you do here
which of course don't have to do but which looks nice in this case here I
think, how you can do this if you have the image as a file here.
Now what if the image is coming from the web though?