Now we have the card look, now as a next thing let's fix the buttons and that's something I already showed
you,
so definitely your chance to pause the video and do it on your own.
I want to make sure that the buttons have the equal size, they shouldn't take the full available width
but they should have an equal size which makes sure that the text fits in there and that they're
equally sized.
So your chance to pause the video, thereafter we'll do this together. Were you successful?
Let's make sure the buttons have the same size and for this in the start game screen where I have the
buttons, you learned that the solution is to wrap the buttons in a view. So you have to add your own view
component around the buttons
and now you can assign a style to these buttons, so to both buttons here and I'll use a button object
in my styles object down there,
so let's add a button here and simply give that a width and here, a width I'll choose is let's say 80.
Let's see what this looks like, if I save this, a bit too small as it seems since there is a line break
in this button.
So let's go with 120, now that's certainly too much,
so how about 100 and that looks pretty neat to me.
Now in addition and that was not a task for a user, no worries if you didn't do that,
I want to change their colors and one of the colors should be our main color
and I also want to set up some accent, some secondary colors so to say which we can use.
So for that back in the start game screen component, on the button itself, there is a color prop which
you can set to control the color
and for Android, that's the background color, for iOS that will be the text color and now the reset button,
there
I want to set up a color of #717fc,
that's a nice color I think
and for the main button, the confirm button, I'll use my main theme and I want to use the same color I
use in the header.
So there I have this hex code used as a background color,
I'll use the same color here for this second button now. With that we can save this and now we got
these two button colors here which looks quite nice in my opinion.
Now one downside of this approach or one thing we can improve is that I'm using this hex code here, I'm
using it in the header and chances are that later in the app
we want to use the same color in other places too.
So it would be nice if we could set this up as kind of a theme
you could say, that we could easily use these colors without copying hex codes across our app and that
we can also change the color in one place if we ever want to use a different color and we don't have
to do that in dozens of components.
And for that I'll use an approach where I'll add a new folder on the root level and I'll name it constants
and as always, you can name these folders whatever you want
and in there I want to have a colors.js file. Again this name can also be named whatever you want
because what this file will do is it will export a default Javascript object, it will export a Javascript
object and in there, you can have any key-value pairs you want and I'll set up a primary color,
so just primary as a key name and this should be this hex code which I just copied, so this header color
also accent or secondary, whatever you want to name it,
I'll go with accent color and that should be this other color which I used on the first button,
so this hex code here, I'll use that in here.
Now these colors are defined here and we can now simply import them from this file and whenever we change
them here, they're changing everywhere in this application and we can therefore easily swap this during development.
So now in the start game screen, we can just go ahead and import colors from constants/Colors like this
and I gave this a capital C here to kind of indicate that this is a collection of values,
you can name this whatever you want,
you can also use a lowercase c, that naming doesn't matter
and now you can use colors here to assign your colors.
So for this reset button, we'll now use a dynamic value so that we can reach out to colors.accent
and here for the main button, for the confirm button, I'll go with Colors.primary and the same in the
header. There of course, we now also want to use that color and not hardcode it in here,
instead import colors from constants/Colors
and with that imported, you can also use that in a stylesheet, not just in jsx, you can use it anywhere
in that file after all,
so now here, I'll refer to Colors.primary. And if you save that, again we have the same look as before
but yet again in another more elegant way where if you ever decide that your accent color should not
be this color but should be blue, you just swap it here, your app is rebuilt and you have a blue button.
So that is the huge advantage of managing your colors or other core constants in such files, you could
have another file named text for example where you have some core font sizes or another file spacing
where you store default values for margins or padding so that you don't manually have to use the same
values over and over again,
these are all approaches you can use to make your life as a developer easier and to have code where
you can quickly swap values if you need to.
For now, I'll just manage my colors in there because that's one of the things that is most annoying to
copy around and it's a really great approach therefore to manage it in such a file.