So now with these first basic steps taken, if I now fill in a number here and we continue, this all looks
good to me here,
this all works, if we now start a game,
then I also want to reduce this spacing we have here and I also want to make sure that my box is down
there,
so this log of guesses we have, that this also
looks better.
Now that is something we can do on the game screen of course because that's the screen we're currently
viewing there.
Now for one of course, it's the spacing, this margin top on our bottom container which is this container,
margin top is this distance between the number here and the container and I want to change this. Now
to change this,
we can again use the dimensions API.
So here, I again import dimensions from React Native and now down there, we can calculate this margin
dynamically. What we can do here is we can again get the dimensions of our window and then here,
the width or in this case, probably the height and then divide this by something but this would be
very cumbersome, we could divide this by 20 for example, by 20 and see if that looks good but this
is really a guessing game then, might not be what we really want.
Instead we could check how much height we have available and then use a different spacing based on
that. We could check if our height is let's say greater than 600,
if that's the case, we want have a spacing of 20, otherwise we have one of 10. So we can also use the
dimensions we're calculating in an if condition, in this case in a ternary expression here but you could
use it in a normal if check as well.
So now we can go back here and what we now see is that when we start the game, we don't have that huge
of a gap here on the smaller screen, on the iPhone which is a bigger screen however, we definitely have
a bigger gap and to see that clearer, you can of course play around with that
and for example use 30 for smaller screens and 30 for bigger screens and 5 for smaller screens
and now you should definitely see that.
Here we have a small gap
and here, we have a bigger gap.
So we can also use this in if conditions.
Now with that, I'll set this back to 20 and 5 here but this now hopefully also shows yet another way
of using this.
You can use this in if conditions which of course gives you a lot of flexibility in cases where you
don't want to use the width in a dynamic calculation but you have different hardcoded values which you
want to use based on different breakpoints you want to set, a little bit like you know it from CSS
where you also have media queries and then you can render different things based on different media
queries.
You're also not restricted on using the dimensions API down there in your stylesheet of course, you
can use it anywhere where you can use Javascript, so everywhere in your components basically. You could
also attach totally different styles based on the available width or height. We could also use dimensions
get window here where I assign my style and for example, check my height here, check if it's greater than
600 and if that's the case, use styles button container and otherwise, use styles button container
small if we had this class. I don't have it here, so I'll get rid of that but that's another way of using this,
you can use it anywhere where Javascript runs. You can also of course use it here, you could have an if check
here right before you return your jsx code and check get window height, if that's greater than 600
and if that's the case let's say, you return totally different
jsx code and therefore this code thereafter will never run if you return here and only if you don't
make it into this if check,
so if you have a device that's not as tall as this one, then you make it down there.
So you're really flexible here and use that flexibility to build the layouts you want because that's
what this is all about and what gives you a lot of flexibility for your apps.
So that's the spacing here,
now I also wanted to change my log items down there,
that's also something we can easily do of course.
We have our list items there and on the list items, we set a width of 100% because we set our list
width here with the list container and that's set to 60%.
Now 60% looks pretty good on bigger devices I think
but on smaller devices, we could go bigger than that.
Now we can of course again try to solve this with different rules here where we set a max width and
a min width and maybe also use the dimensions API to calculate this dynamically or we again use an if check.
Here we could again say dimensions get window, get the available width in this case and if that's let's
say greater than 500, then I want to use 60%,
otherwise I want to use 80%. So now we simply render a broader, a wider list container based on
the available width on the device we're running on
and let's actually use
350 here maybe instead of 500 because we're talking about the width, not
about the height.
So now here if we run this on the iPhone, we have to same width as before but on the smaller screen,
we have bigger items.
So that's also something we can do and you can of course play around with the breakpoint
you're effectively setting here.
you can try out different breakpoint sizes here.
Of course you could also have multiple breakpoints,
you can have nested ternary expressions here or before you write too many nested expressions, simply
set up different style objects here which you then load with different if checks you use up there. Just to
give you an example for this, we could have a list container big here and there, we set flex one and we
set our width of let's say 80% because this is the big one
and here we have the normal one with 60%.
Now I have no if condition down there but I have two different style objects
and now we just need to attach different style objects up there,
not here but here of course, on this view. Well, to do this, we can simply set up a list container style variable
here for example and point at styles list container which is our default but then add an if check here
where we check if dimensions get window width and now if the width here is let's say smaller than 350,
so if we have a small device, then we want to have the big list container, so then we
can set list container style,
this variable equal to styles list container
big to point at this style object and now we can use that style object here on the view where we need
the list container style, we use the variable now which holds a different list container style object
based on the width of our device. And if we now save this and we run this again, you see that on the
iPhone with the bigger device where we have more width, we got the smaller container and here on the
Android phone with the smaller device, with less width, we get the bigger container.
So it's the same result as before but a bit more readable
and now we could have multiple such if checks here where we store different styles here in the list
container style which we then use down there,
this can be more readable than having nested ternary expressions down there in your stylesheet object.
So this is how you can play around with that and being aware of that flexibility of the dimensions API
is really crucial here.