Now that we worked on the text here,
for one we can now go back to app.js and get rid of this temporary change here where we always show
the game over screen,
we don't want to do that anymore, instead we want to start with the normal start game screen again
and in addition to this change, I now also want to make one extra adjustment and that's this start game
button.
We're using the normal button here which of course is something you can do but sometimes you also want
to create your own button, you want to have full control over how your button looks like
and for this, you can of course create your own button and that's exactly what we're going to do now.
Hence in the components folder, I'll add my own button and you can name this whatever you want, you could
name it button
but that's kind of already the name of the built-in one
and whilst you could of course still name yours like this, to avoid any name clashes or confusion, I'll
name my button here main button because it will be my main, my primary button which I use for the
big actions in this game
like starting a new game.
Now that's the file name in there, we'll have a regular React component of course,
therefore we import React.
We import a view here, we will certainly need some text,
we'll certainly need a stylesheet from React Native like this
and then here, we have the main button component which receives props and which in the end will return
some jsx. We'll have our styles object with Stylesheet.create
and as always, we'll export our main button.
And now the question is, how do you build your own button?
Now it might sound very complex to do that but actually, it isn't. Your own button is also just a combination
of view and text and very important, also a touchable component, like touchable highlight or touchable
opacity or touchable native feedback or even touchable without feedback
if you don't want to give any visual feedback. So here I'll go with touchable opacity and we need that
to give the user feedback regarding the fact that the button was pressed and to register an onPress event
and other than that, we'll just build our button with a view which we styled in a certain way and
a text in there.
So now here in main button, we can return our touchable opacity and in there, have a view which we can
use to then style the button and in there, maybe a text for a text a button should have.
Now let's say our button should be usable such that we passed a text directly between the opening and
closing tags of our component,
hence here we can use props children as the text I want to show on the button
and then here on this view, I'll have a style of let's say styles button, on this inner text here, we could
have a style of styles button text and these names are up to you of course and on the touchable opacity,
I'll add the onPress listener and we'll have to do something there.
So now we get the skeleton for our button,
now we can start adding some styles to it.
Now of course you can style that button in whatever way you want,
I got a certain style in mind here which I'll add
but again, definitely play around with that and apply your own styles.
So for the button itself which is the view around the text, I want to give the button a certain background
color and you could also ensure that this can be set from outside of course,
you can get really creative here. I'll hardcode a color in here by of course using my colors constant here. 03:42.270 -- 03:48.960 So I'll import colors from constants/Colors, colors like this
and then here use colors primary color, the primary color maybe, like that.
So that's the background color this button should have, again you could also make sure that this style
is set dynamically with the help of some prop you're getting from outside
but here, I'll hardcode it in here.
In addition to that, the button should have some padding so that the text doesn't sit directly on the
edges of the button container,
so of the box around the text but there is some spacing and you can use the same padding in all directions
but I want to use a padding vertical of 12,
so not that much padding to top and bottom and a padding horizontal of let's say 30,
so way more padding to left and right.
That's the button, now for the text of the button, there
also the color of white which should look good on our primary color,
you could use black too because our primary color actually is a color where, as you can see, both white
and black actually work,
so you could use either but I'll go with white here for the button and I'll add a font family of
open sans to use this custom font there as well, as you learned, you need to set this on every text, there is
no inheritance, there is no global font you could set up, every text that should use this font needs to
get it and I'll add a font size of let's say 18 to have a bigger text here in this button. Now when the
button is pressed, then I actually of course typically don't want to handle this press event inside
of the button but inside of the component where we use the button.
So I simply want to forward it
and for that, we can simply expect to get a function reference, an event handler function on the let's
say onPress prop of our custom button
but you could name this prop anything, you could name it onClick because in the end, it's you who uses
your own button
and there you just have to make sure you pass a fitting function reference, a fitting pointer at an event
handler function to the onPress or whatever you name it prop on your own button.
So this name is up to you,
now let's use the main button and let's use it on the start
game screen. There we can simply import it,
so import the main button from components/MainButton and this main button now is used here for starting
a new game.
So I'll replace button here with main button
but keep in mind that on this button, I configured the content, the text to be shown such that it's actually
the content which is passed between the opening and closing tags of our button and therefore back in the
start game screen,
the title here is no longer passed on a title prop but instead, now we have an opening and closing tag
for our own button and we add start game there.
Now onPress is still a prop we leave here because in the main button, I forward the onPress event
so to say, to the function I get on my own onPress prop here,
therefore we have to set the onPress prop on our own button and therefore with that, we should have
a nice main button here, a nice button when we start a new game.
Let's give this a try here,
this is how it looks like and that looks quite nice in my opinion, a nice button.
I'm not done though,
I want to have rounded corners on that button and for that, back in the main button file,
we can of course simply go to this button property here in the stylesheet which is the style object
getting applied to our view and there, we can add a border radius of 25 and if we do that, then
you'll see that if I now get this button, it now has this nice look here.
Let you also show it on Android, now has rounded corners and has this nice opacity effect when you tap
on it
and by the way as mentioned earlier already, you can change this opacity effect by going to the touchable
opacity component and there, you can set the active opacity to the level of opacity you want to have
when it's pressed,
for example if you use a rather high value here, then this effect is less strong,
now it's only slightly transparent when we tap on it and not as transparent as before. But that's totally
up to you what you want here,
I'll go for .6 here to have a slightly stronger effect
but again that's something you can configure and in general, my suggestion would be that you play around
with that and see how you can style that button, how you can really fine tune it to your requirements. Now
with the custom button added,
I also want to use it on the game over screen,
so there, I'll also import main button from components/MainButton like this
and then simply add that main button here when we show our new game button down there.
Use the main button instead, therefore remove the title prop because that's not how we're setting the
title on our own custom button,
instead we have to pass it here between the opening and closing tags of our custom component tags.
So therefore now here, this should also look nicer if we quickly finish a game here, trying to let the
computer guess 33,
here we are and now we see the nice button here too.
We also see the correct output here regarding the number of rounds it took and the number we had to
guess
and we can start a new game thereafter and also go through that again real quick,
yes,
that's all looking really nice. The remaining thing I now still want to do is I want to work on these
two buttons, lower and greater.
They look a bit boring
I'd say, we can certainly make them look more exciting. Now one way of making them look a bit more exciting
is that we use our custom button there as well.
So of course here in the game screen, we can also import the main button from components/MainButton,
so our own custom button and use that instead of the button we're currently using, which is built-in
one. So use our own button here,
therefore of course move the title between the opening and closing tags,
so here that's lower and then here for the second button, that is greater
and now this should look a bit nicer if we start a new game here.
Now we use our custom buttons here, though now we also see a problem,
there are simply a bit too big, there're too close to each other,
we can change that however by going down to the button container and giving this a bit more width, maybe
set the max width to 90% here actually.
So now if we try this again, yes that looks a bit better, there is at least some spacing between the buttons
and for now this will do because for now, we're not optimizing for all screen sizes.
Let's also increase this width here to 400 though so that we have enough width, we do actually use 400
pixels and now this looks good here on iOS
and also on Android. Now that looks a bit better as I mentioned
but wouldn't it be also nice if we had icons in there, instead of text because text of course works but
an icon might also do the trick
and we haven't used icons thus far since you often need them in mobile apps though. It's definitely something
you should also be aware of, you should be aware of how to work with icons, how to add icons inside of
your app and that's therefore what we'll do next.