1
00:00:02,150 --> 00:00:06,950
Now with our custom fonts added, we are now able to use them in our application

2
00:00:06,950 --> 00:00:12,740
and I want to use them in all places where we display some texts, like here with you selected,

3
00:00:13,130 --> 00:00:17,410
here the opponents guess and then also on the summary page,

4
00:00:17,410 --> 00:00:24,010
that will also be a goal here in this application and in addition to that, when a game is over,

5
00:00:24,020 --> 00:00:30,770
not only do I want to use our custom font here on this game over page but I also want to show an image,

6
00:00:30,830 --> 00:00:32,460
a game over image here,

7
00:00:32,510 --> 00:00:34,830
so that's the next thing I want to work on.

8
00:00:34,850 --> 00:00:42,770
First step is to replace this text here with the body text to use the font, so I import body text from the

9
00:00:42,770 --> 00:00:49,970
components folder and there, from body text and then replace all these text components here with body

10
00:00:49,970 --> 00:00:54,200
text, simply so that when a game is over, we use our custom font,

11
00:00:54,200 --> 00:00:55,450
that's the goal here.

12
00:00:55,730 --> 00:00:57,950
But that's as I just said only one thing,

13
00:00:57,950 --> 00:01:03,200
the main thing which should happen here is that we also have an image here.

14
00:01:03,260 --> 00:01:11,360
So let's say we have our the game is over title actually, so let's use the title text here maybe now that I think

15
00:01:11,360 --> 00:01:12,350
about it,

16
00:01:12,530 --> 00:01:16,460
title text instead of body text but that below this title,

17
00:01:16,460 --> 00:01:19,830
so below the game is over, we show an image.

18
00:01:19,880 --> 00:01:27,740
So here, I want to use some component which actually allows us to display an image and React Native has

19
00:01:27,800 --> 00:01:36,470
such a component, it has an image component. We can use image here as a normal component in our jsx

20
00:01:36,470 --> 00:01:43,490
code just like that, it's a self closing component, an image has one important prop and that is the source

21
00:01:43,490 --> 00:01:51,170
prop and the source prop as the name suggests has to be set to point at an image and now there are two

22
00:01:51,170 --> 00:01:58,430
kinds of images you can use - local images which you ship as part of your app, so which you include in

23
00:01:58,430 --> 00:02:05,600
your source code, in your app bundle in the end or network images and we'll have a look at both.

24
00:02:05,610 --> 00:02:14,280
Now let's start with a local image and for that, attached you find these success.png file which you can

25
00:02:14,280 --> 00:02:17,000
drag into your assets folder,

26
00:02:17,370 --> 00:02:23,430
so not in the fonts folder there but just into assets or you create an images sub-folder if you want

27
00:02:23,430 --> 00:02:24,240
to,

28
00:02:24,270 --> 00:02:25,150
doesn't really matter,

29
00:02:25,170 --> 00:02:31,290
I'll have it just here in assets, it's this success.png file and this is the file which I want to use

30
00:02:31,290 --> 00:02:31,550
here,

31
00:02:31,560 --> 00:02:39,480
so the image I want to render here. Now for that, to render this image here,

32
00:02:39,660 --> 00:02:46,040
we use a special syntax which might look strange the first time you're seeing it. You used this require

33
00:02:46,050 --> 00:02:52,440
function which is built into Javascript or which is supported by React Native in Javascript let's say,

34
00:02:53,010 --> 00:02:57,840
where you pass a string as an argument and this is the string pointing at the image and this should

35
00:02:57,840 --> 00:02:59,240
be a relative path,

36
00:02:59,250 --> 00:03:04,530
so here since we're in the screens folder, we have to go up one level, then into the assets folder and

37
00:03:04,530 --> 00:03:07,450
then here, we can point at success.png,

38
00:03:07,470 --> 00:03:09,090
just like that.

39
00:03:09,150 --> 00:03:14,490
Now this tells React Native that we want to use this image here and behind the scenes, it allows React

40
00:03:14,490 --> 00:03:20,190
Native to effectively load this and also to have a look at the image and for example determine its width

41
00:03:20,430 --> 00:03:21,340
and height,

42
00:03:21,360 --> 00:03:28,830
that's why we use this strange require syntax and we have to load local images like this.

43
00:03:30,010 --> 00:03:32,280
Now with that to see the result,

44
00:03:32,410 --> 00:03:39,400
I'll tweak the app.js file temporarily to make sure we always display the game over screen there, simply

45
00:03:39,400 --> 00:03:46,060
so that I don't always have to go through the entire screen just to verify that it updated, that it changed.

46
00:03:46,660 --> 00:03:53,590
So the game over screen is what I'll temporarily use as my main content here right from the start and

47
00:03:53,590 --> 00:03:57,850
I'll simply pass in some dummy numbers for rounds number and user number,

48
00:03:57,880 --> 00:04:04,390
again I'm only doing this so that we start with the game over screen here and see what this gives us. And

49
00:04:04,480 --> 00:04:10,730
we can see what this gives us, it gives us a full screen image in the end, a really large image.

50
00:04:10,780 --> 00:04:14,140
The reason for that is that the image I gave you is pretty large,

51
00:04:14,200 --> 00:04:17,590
this success.png file is not a small file,

52
00:04:17,710 --> 00:04:22,040
it's a pretty big image regarding the pixels, its width and its height.

53
00:04:22,210 --> 00:04:29,320
And as I said when you use require like this, the good thing is that React Native has a look at the image

54
00:04:29,320 --> 00:04:34,020
file, determined its width and height and uses the same width and height here which means we render

55
00:04:34,020 --> 00:04:41,050
this huge image here on the application and the downside simply is that this now no longer fits

56
00:04:41,050 --> 00:04:45,450
on the screen or occupies the entire screen because it's a too large file.

57
00:04:45,550 --> 00:04:50,440
If we had a smaller image, this would not be a problem, then it would just occupy a part of the screen

58
00:04:50,440 --> 00:04:54,160
but since it's a large image, it occupies the entire screen.