Now with our custom fonts added, we are now able to use them in our application
and I want to use them in all places where we display some texts, like here with you selected,
here the opponents guess and then also on the summary page,
that will also be a goal here in this application and in addition to that, when a game is over,
not only do I want to use our custom font here on this game over page but I also want to show an image,
a game over image here,
so that's the next thing I want to work on.
First step is to replace this text here with the body text to use the font, so I import body text from the
components folder and there, from body text and then replace all these text components here with body
text, simply so that when a game is over, we use our custom font,
that's the goal here.
But that's as I just said only one thing,
the main thing which should happen here is that we also have an image here.
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
about it,
title text instead of body text but that below this title,
so below the game is over, we show an image.
So here, I want to use some component which actually allows us to display an image and React Native has
such a component, it has an image component. We can use image here as a normal component in our jsx
code just like that, it's a self closing component, an image has one important prop and that is the source
prop and the source prop as the name suggests has to be set to point at an image and now there are two
kinds of images you can use - local images which you ship as part of your app, so which you include in
your source code, in your app bundle in the end or network images and we'll have a look at both.
Now let's start with a local image and for that, attached you find these success.png file which you can
drag into your assets folder,
so not in the fonts folder there but just into assets or you create an images sub-folder if you want
to,
doesn't really matter,
I'll have it just here in assets, it's this success.png file and this is the file which I want to use
here,
so the image I want to render here. Now for that, to render this image here,
we use a special syntax which might look strange the first time you're seeing it. You used this require
function which is built into Javascript or which is supported by React Native in Javascript let's say,
where you pass a string as an argument and this is the string pointing at the image and this should
be a relative path,
so here since we're in the screens folder, we have to go up one level, then into the assets folder and
then here, we can point at success.png,
just like that.
Now this tells React Native that we want to use this image here and behind the scenes, it allows React
Native to effectively load this and also to have a look at the image and for example determine its width
and height,
that's why we use this strange require syntax and we have to load local images like this.
Now with that to see the result,
I'll tweak the app.js file temporarily to make sure we always display the game over screen there, simply
so that I don't always have to go through the entire screen just to verify that it updated, that it changed.
So the game over screen is what I'll temporarily use as my main content here right from the start and
I'll simply pass in some dummy numbers for rounds number and user number,
again I'm only doing this so that we start with the game over screen here and see what this gives us. And
we can see what this gives us, it gives us a full screen image in the end, a really large image.
The reason for that is that the image I gave you is pretty large,
this success.png file is not a small file,
it's a pretty big image regarding the pixels, its width and its height.
And as I said when you use require like this, the good thing is that React Native has a look at the image
file, determined its width and height and uses the same width and height here which means we render
this huge image here on the application and the downside simply is that this now no longer fits
on the screen or occupies the entire screen because it's a too large file.
If we had a smaller image, this would not be a problem, then it would just occupy a part of the screen
but since it's a large image, it occupies the entire screen.