1
00:00:02,310 --> 00:00:05,400
Let's say we want to use an image from the web

2
00:00:05,400 --> 00:00:12,950
and for that, you can simply pick one here, I'll do it with Google image search, let's say this one and

3
00:00:12,950 --> 00:00:16,640
we want to use that image on our game over screen.

4
00:00:16,670 --> 00:00:20,870
Now before, we use this require syntax to load a local image,

5
00:00:20,870 --> 00:00:23,650
now this syntax will no longer be the right one.

6
00:00:23,650 --> 00:00:26,900
So I'll duplicate this line and comment it out, for a web image,

7
00:00:26,900 --> 00:00:35,900
instead you pass an object to source and on that object, you pass a URI prop and that URI

8
00:00:35,900 --> 00:00:39,080
prop holds a string which is your link to the image.

9
00:00:39,080 --> 00:00:45,080
So your link to the image is passed to the URI prop in this object which you passed to source.

10
00:00:45,080 --> 00:00:50,480
Now if you do that, this loads the image from the web but there is one important thing you have to know.

11
00:00:51,170 --> 00:00:52,430
For the image

12
00:00:52,430 --> 00:00:54,230
that was loaded locally,

13
00:00:54,260 --> 00:01:00,250
I mentioned that React Native is able to determine its width and height and uses that as a default.

14
00:01:00,410 --> 00:01:06,320
Therefore for a locally loaded image, you don't have to set a width and height on the image,

15
00:01:06,350 --> 00:01:10,120
we're doing it here because we want to override the default width and height

16
00:01:10,250 --> 00:01:15,380
but if you had an image that is already perfectly sized, you wouldn't have to set width and height. For

17
00:01:15,380 --> 00:01:16,790
images from the web,

18
00:01:16,790 --> 00:01:22,130
React Native is not able to determine the width and the height of the image before it's loaded because

19
00:01:22,130 --> 00:01:24,290
it's not part of the app, it's coming from a web,

20
00:01:24,320 --> 00:01:30,110
React Native downloads it and it's kind of a surprise regarding what the width and the height is. Therefore

21
00:01:30,110 --> 00:01:32,140
for network images,

22
00:01:32,150 --> 00:01:38,810
so for images you are fetching with a link, you always have to set a width and a height on the image

23
00:01:38,840 --> 00:01:43,840
object, on the image component here. For local images added with require,

24
00:01:43,880 --> 00:01:48,040
you can do that as we're doing it to override it but you don't have to,

25
00:01:48,110 --> 00:01:51,020
that's an important differentiation.

26
00:01:51,060 --> 00:01:58,230
Now you might have also seen that for web images, the loaded image actually faded in when it was loaded

27
00:01:58,230 --> 00:02:03,100
for the first time and that's a nice factory effect React Native adds automatically for network images.

28
00:02:03,310 --> 00:02:09,330
It downloads that image and whilst you're waiting for the download to complete, it basically shows

29
00:02:09,330 --> 00:02:14,880
nothing, it can't show the image yet but when the image is loaded, it doesn't just pop it in there but instead,

30
00:02:14,910 --> 00:02:18,940
it slowly fades it in which is a nicer transition for that loaded image.

31
00:02:18,990 --> 00:02:24,340
That's a nice effect and you can also control this with fade duration,

32
00:02:24,360 --> 00:02:27,390
you can set this to a number and the default is 300,

33
00:02:27,390 --> 00:02:33,360
that would be 300ms but you can set this to a different millisecond value, like 1000ms

34
00:02:33,360 --> 00:02:39,450
which would be one second for the image to fade and so on. After the first load, the image is cached and

35
00:02:39,450 --> 00:02:44,610
therefore subsequent usages of the same image happened pretty much instantly because it already was

36
00:02:44,610 --> 00:02:45,760
downloaded.

37
00:02:45,780 --> 00:02:49,320
So that's how to use network images and what to be aware of regarding those.