WEBVTT

1
00:00:00.960 --> 00:00:05.060
Hi and welcome to this tutorial
on the image component in React native.

2
00:00:05.080 --> 00:00:08.460
In this video we'll be taking a look
at how to use this powerful component

3
00:00:08.490 --> 00:00:11.860
to display images in your
app and why it's useful.

4
00:00:11.890 --> 00:00:16.260
The image component is extremely useful
because it allows you to easily display

5
00:00:16.290 --> 00:00:20.340
images in your app whether they
are local or from a remote source.

6
00:00:20.370 --> 00:00:22.540
This can add a lot of visual appeal

7
00:00:22.570 --> 00:00:25.220
to your app and make it
more engaging for users.

8
00:00:25.240 --> 00:00:29.340
Additionally, it allows you to handle
errors while loading images and customize

9
00:00:29.370 --> 00:00:32.260
the way images are displayed
with the available props.

10
00:00:32.290 --> 00:00:34.540
Now let's get to coding and see how

11
00:00:34.570 --> 00:00:38.420
the image component is actually
used in React Native applications.

12
00:00:38.440 --> 00:00:39.820
You're now looking at my screen

13
00:00:39.850 --> 00:00:45.140
with my editor opened, with my simulator
here and my Metro bundler running.

14
00:00:45.170 --> 00:00:48.500
And now let's see how to use
image component for this.

15
00:00:48.530 --> 00:00:50.580
What we first need to do is import

16
00:00:50.610 --> 00:00:55.780
the image components from React native and
then we're going to nest it inside here.

17
00:00:55.810 --> 00:00:58.020
So let's create image component.

18
00:00:58.050 --> 00:01:00.220
And the first and the most important prop

19
00:01:00.250 --> 00:01:03.020
that comes with the image
component is the source.

20
00:01:03.050 --> 00:01:05.900
And the source takes in a require function

21
00:01:05.930 --> 00:01:10.490
that will take in a string
with the address of the image.

22
00:01:10.520 --> 00:01:15.100
So for this purpose I have the cake
PNG file that I imported here.

23
00:01:15.130 --> 00:01:18.620
So if I just do this the cake
PNG file will show up.

24
00:01:18.650 --> 00:01:20.930
But what I also want to discuss is

25
00:01:20.960 --> 00:01:23.740
that image component also
comes with the styling.

26
00:01:23.770 --> 00:01:28.490
So we could give it width
of hundred and height of hundred.

27
00:01:28.520 --> 00:01:30.120
And if we save this we're going to be

28
00:01:30.150 --> 00:01:32.290
seeing the cake image
that I have imported.

29
00:01:32.320 --> 00:01:38.160
So usually how you would architecture your
project to include images is that you

30
00:01:38.190 --> 00:01:43.850
would create an assets folder
and inside that you would create another

31
00:01:43.880 --> 00:01:48.930
folder called Images and then you
would put your cake PNG file there.

32
00:01:48.960 --> 00:01:52.980
I just changed my path and the cake
PNG file is still displaying.

33
00:01:53.010 --> 00:01:58.700
So what you could also do is use a remote
path in order to show an image here

34
00:01:58.730 --> 00:02:04.460
and the way to do that would be
let's copy this and paste it here.

35
00:02:04.490 --> 00:02:11.100
And for that what you would need is not
the required function but an Uri

36
00:02:11.130 --> 00:02:15.450
and you would assign a string to it
and inside the string you would input

37
00:02:15.480 --> 00:02:19.700
the address of the image
that you're trying to display.

38
00:02:19.730 --> 00:02:24.420
And if I do that you're going to see
a cake image that I found on Google.

39
00:02:24.450 --> 00:02:29.520
Now what I also want to do is discuss
the resize mode

40
00:02:29.560 --> 00:02:35.700
property and I want to mention
the first one that is called contain.

41
00:02:35.730 --> 00:02:38.980
And in this example image will be scaled

42
00:02:39.010 --> 00:02:44.500
uniformly so both dimensions width
and height of the image will be equal

43
00:02:44.530 --> 00:02:48.380
to or less than the corresponding
dimension of the view

44
00:02:48.410 --> 00:02:53.420
maintaining the aspect ratio.
This image will be scaled uniformly so

45
00:02:53.450 --> 00:02:57.980
that both dimensions width and height
of the image will be equal to or less than

46
00:02:58.010 --> 00:03:02.820
the corresponding dimension of the view
maintaining the aspect ratio.

47
00:03:02.850 --> 00:03:05.740
So our image displayed
here is not a square.

48
00:03:05.770 --> 00:03:11.260
So this means that image that is displayed
here is now maintaining its aspect ratio.

49
00:03:11.290 --> 00:03:16.180
And how we could check that is that we
could give it a background color of red.

50
00:03:16.210 --> 00:03:18.740
And we're going to see that actually this

51
00:03:18.770 --> 00:03:23.260
whole image is taking 100
width and 100 height.

52
00:03:23.290 --> 00:03:25.340
But because it's trying to maintain its

53
00:03:25.370 --> 00:03:29.100
aspect ratio, this image
got a bit smaller.

54
00:03:29.130 --> 00:03:31.380
So you could use this contain method

55
00:03:31.410 --> 00:03:34.140
whenever you want to maintain
the aspect ratio.

56
00:03:34.170 --> 00:03:40.020
But you have a fixed width and height that
you know that you don't want to overflow.

57
00:03:40.050 --> 00:03:44.580
The next thing that we're going to be
discussing is a property called stretch.

58
00:03:44.600 --> 00:03:45.540
And in this example,

59
00:03:45.570 --> 00:03:50.060
the image will be scaled and the width
and the height independently can change

60
00:03:50.090 --> 00:03:54.020
and the aspect ratio is going
to be affected as well.

61
00:03:54.050 --> 00:03:56.940
So let's change this to stretch.

62
00:03:56.970 --> 00:04:00.260
And now we see that our image has actually

63
00:04:00.290 --> 00:04:04.260
stretched so that it fills
the width of 100 and height of 100.

64
00:04:04.290 --> 00:04:07.100
So if we were to change the height or

65
00:04:07.130 --> 00:04:10.420
width, actually let's change the width
to 200,

66
00:04:10.450 --> 00:04:16.180
the image will be scaled and the aspect
ratio is not going to be maintained.

67
00:04:16.210 --> 00:04:22.180
The third thing that I want to discuss
is a property called repeat.

68
00:04:22.210 --> 00:04:27.340
And this way the image will be repeated
to cover the frame of the view

69
00:04:27.360 --> 00:04:30.740
and the image will keep its
size and the aspect ratio.

70
00:04:30.770 --> 00:04:38.420
So if we say repeat here and let's say we
give it a width of 100% and the height

71
00:04:38.450 --> 00:04:43.780
of 100%, then you're going to see
a repeated image here because the images

72
00:04:43.800 --> 00:04:49.780
height is actually less than
our simulator's height.

73
00:04:49.800 --> 00:04:53.220
So now it's repeated three times almost.

74
00:04:53.250 --> 00:04:59.060
And the last thing that I want
to discuss is the center property.

75
00:04:59.090 --> 00:05:03.340
And in this example the image will be
scaled down so that it's completely

76
00:05:03.360 --> 00:05:09.540
visible if bigger area is
present than the actual image.

77
00:05:09.570 --> 00:05:15.780
So now we're seeing that the image is
centered completely in the 100% container.

78
00:05:15.800 --> 00:05:17.660
And we'll see this because our background

79
00:05:17.690 --> 00:05:24.220
is set to red and we see the red
background here and here present equally.

80
00:05:24.250 --> 00:05:27.700
And the last thing that I want
to discuss is on error handler.

81
00:05:27.730 --> 00:05:31.420
And for this, what we're going to have
to do is

82
00:05:31.450 --> 00:05:37.020
use the prop and pass it a handler
function that will take care of falling

83
00:05:37.040 --> 00:05:42.020
back to a default image just
in case this image is not found.

84
00:05:42.040 --> 00:05:47.940
So in order to demonstrate this,
I'm going to be using the useState hook

85
00:05:47.970 --> 00:05:53.439
and I'm going to set a default value
for the image source

86
00:05:53.639 --> 00:06:00.060
and we're going to create this
variable called image source and we're

87
00:06:00.090 --> 00:06:03.180
going to create image
source setter as well.

88
00:06:03.210 --> 00:06:07.600
And we're going to useState to give it
a default value and let's give it

89
00:06:07.630 --> 00:06:11.740
a default value of something that cannot
fetch an image,

90
00:06:11.770 --> 00:06:23.100
let's say http://example.com. And this has
to be an object with the Uri here

91
00:06:23.130 --> 00:06:27.340
so that we match the object
that we created inside here.

92
00:06:27.360 --> 00:06:32.340
And then what we're going to do is use the
image source variable inside the source.

93
00:06:32.360 --> 00:06:35.700
And then if we're unable to get an image

94
00:06:35.730 --> 00:06:40.500
from here, what we're going to be doing
is we're going to be setting an image.

95
00:06:40.530 --> 00:06:42.500
That's our fallback option.

96
00:06:42.530 --> 00:06:48.060
And let's make that fallback option
our cake image that we created.

97
00:06:48.090 --> 00:06:55.100
So let's give it the path to that image
and let's also console log.

98
00:06:55.130 --> 00:07:01.420
That error has been detected
while loading an image.

99
00:07:01.450 --> 00:07:03.580
Now let's save this

100
00:07:03.600 --> 00:07:10.060
and we're going to see our cake here
and we're going to see a message here

101
00:07:10.080 --> 00:07:12.500
that error has been detected
while loading an image.

102
00:07:12.530 --> 00:07:16.560
So let's reload this once more.

103
00:07:17.120 --> 00:07:21.460
First you're going to see the red
background and after a bit we saw

104
00:07:21.480 --> 00:07:26.180
the image of the cake and that's
it for the image component.

105
00:07:26.210 --> 00:07:28.340
These are just a few examples of how you

106
00:07:28.360 --> 00:07:32.860
can use the resize mode prop to control
how the image is scaled and cropped.

107
00:07:32.890 --> 00:07:33.660
With this prop,

108
00:07:33.690 --> 00:07:37.460
you have a lot of flexibility in how
you display images in your app.

109
00:07:37.480 --> 00:07:39.680
Thanks for watching and see
you in the next video.