Hi and welcome to this tutorial on the image component in React native.
In this video we'll be taking a look at how to use this powerful component
to display images in your app and why it's useful.
The image component is extremely useful because it allows you to easily display
images in your app whether they are local or from a remote source.
This can add a lot of visual appeal
to your app and make it more engaging for users.
Additionally, it allows you to handle errors while loading images and customize
the way images are displayed with the available props.
Now let's get to coding and see how
the image component is actually used in React Native applications.
You're now looking at my screen
with my editor opened, with my simulator here and my Metro bundler running.
And now let's see how to use image component for this.
What we first need to do is import
the image components from React native and then we're going to nest it inside here.
So let's create image component.
And the first and the most important prop
that comes with the image component is the source.
And the source takes in a require function
that will take in a string with the address of the image.
So for this purpose I have the cake PNG file that I imported here.
So if I just do this the cake PNG file will show up.
But what I also want to discuss is
that image component also comes with the styling.
So we could give it width of hundred and height of hundred.
And if we save this we're going to be
seeing the cake image that I have imported.
So usually how you would architecture your project to include images is that you
would create an assets folder and inside that you would create another
folder called Images and then you would put your cake PNG file there.
I just changed my path and the cake PNG file is still displaying.
So what you could also do is use a remote path in order to show an image here
and the way to do that would be let's copy this and paste it here.
And for that what you would need is not the required function but an Uri
and you would assign a string to it and inside the string you would input
the address of the image that you're trying to display.
And if I do that you're going to see a cake image that I found on Google.
Now what I also want to do is discuss the resize mode
property and I want to mention the first one that is called contain.
And in this example image will be scaled
uniformly so both dimensions width and height of the image will be equal
to or less than the corresponding dimension of the view
maintaining the aspect ratio. This image will be scaled uniformly so
that both dimensions width and height of the image will be equal to or less than
the corresponding dimension of the view maintaining the aspect ratio.
So our image displayed here is not a square.
So this means that image that is displayed here is now maintaining its aspect ratio.
And how we could check that is that we could give it a background color of red.
And we're going to see that actually this
whole image is taking 100 width and 100 height.
But because it's trying to maintain its
aspect ratio, this image got a bit smaller.
So you could use this contain method
whenever you want to maintain the aspect ratio.
But you have a fixed width and height that you know that you don't want to overflow.
The next thing that we're going to be discussing is a property called stretch.
And in this example,
the image will be scaled and the width and the height independently can change
and the aspect ratio is going to be affected as well.
So let's change this to stretch.
And now we see that our image has actually
stretched so that it fills the width of 100 and height of 100.
So if we were to change the height or
width, actually let's change the width to 200,
the image will be scaled and the aspect ratio is not going to be maintained.
The third thing that I want to discuss is a property called repeat.
And this way the image will be repeated to cover the frame of the view
and the image will keep its size and the aspect ratio.
So if we say repeat here and let's say we give it a width of 100% and the height
of 100%, then you're going to see a repeated image here because the images
height is actually less than our simulator's height.
So now it's repeated three times almost.
And the last thing that I want to discuss is the center property.
And in this example the image will be scaled down so that it's completely
visible if bigger area is present than the actual image.
So now we're seeing that the image is centered completely in the 100% container.
And we'll see this because our background
is set to red and we see the red background here and here present equally.
And the last thing that I want to discuss is on error handler.
And for this, what we're going to have to do is
use the prop and pass it a handler function that will take care of falling
back to a default image just in case this image is not found.
So in order to demonstrate this, I'm going to be using the useState hook
and I'm going to set a default value for the image source
and we're going to create this variable called image source and we're
going to create image source setter as well.
And we're going to useState to give it a default value and let's give it
a default value of something that cannot fetch an image,
let's say http://example.com. And this has to be an object with the Uri here
so that we match the object that we created inside here.
And then what we're going to do is use the image source variable inside the source.
And then if we're unable to get an image
from here, what we're going to be doing is we're going to be setting an image.
That's our fallback option.
And let's make that fallback option our cake image that we created.
So let's give it the path to that image and let's also console log.
That error has been detected while loading an image.
Now let's save this
and we're going to see our cake here and we're going to see a message here
that error has been detected while loading an image.
So let's reload this once more.
First you're going to see the red background and after a bit we saw
the image of the cake and that's it for the image component.
These are just a few examples of how you
can use the resize mode prop to control how the image is scaled and cropped.
With this prop,
you have a lot of flexibility in how you display images in your app.
Thanks for watching and see you in the next video.