Now we had another issue in this app here because once this is all solved here, if we quickly go
there, make sure that we solve this,
then we have this screen and this screen also is broken.
We got two issues here actually,
one is that the screen isn't scrollable which wasn't a problem on bigger devices where we have more
height
but here, we can't squeeze all the content on the screen, so we might want to make it scrollable just to be
safe and/or alternatively, we make sure that we're guaranteed to fit everything onto the screen and to
be guaranteed that this is the case, we need to go to the game over screen and calculate our heights
here dynamically, especially the image height here which we're right now hardcoding to 300 pixels which
is way too big on the small device.
Now you already learned about the solution for that,
we can again use the dimensions API by importing it from React Native and with dimensions imported,
we can go down to our stylesheet and on the image container, we can now say dimensions get window width
and now let's say for the image container, for the image here, we want to have a width of maybe 70%
of the available width and we want to have the same value as a height,
so I'll just copy that there.
Important here, we don't use height because the image shouldn't be 70% of our available height
high,
instead it should just have the same height as it has width and that's calculated on the device width,
so we use width down there as well. Now here border radius should be half of that, so we can use that here
too and then divide it by two and we'll have the perfect border radius for that dynamically calculated
width. So that's one important thing.
Now we also got a couple of other sizes we're setting up, like the margin vertical here which we hardcode
to 30, the same for the result container and we might want to change this as well. So here we can
also say dimensions get window,
in this case height and maybe divide this by let's say 20 and see if that looks good and also down there
margin vertical, maybe divide this by 40 because it was 15, this was 30,
so let's divide this by 40, if we divided this by 20 to have the same relation
between these two margin verticals again.
So let's solve this again and
let's see what the result is, better,
now at least we can see the button but still not perfect.
This margin here is certainly still too big and also the font size, we could shrink this as well.
So rounder image, we can certainly divide the height by 30 here for this margin we're setting up and then
go to 60 for this result container vertical margin and for the font size here,
here we can use an if check if we want to and for example check our available height here and if that is
let's say smaller than 400, then we use 16 here and otherwise, we use 20. Now last but not least to also
make sure that we can scroll because sometimes with all the tweaking, we'll still not be able to fit
it onto the screen, at least not without making everything super small,
we might want to import that scroll view here and wrap our view with that,
so add scroll view here around our view to make that scrollable and
now let's have a look at this again,
let's solve this,
now this looks better. It fits onto the screen and if we needed to, we would also be able to scroll it, we can
see that on the iPhone by the way, there if we solve this,
on the iPhone we can always scroll a little bit and it bounces back,
we have scrolling enabled and therefore now this looks good on the iPhone but also on this device
where we reduce the font size a little bit, worked on the spacing here a little bit and if it would
go beyond our boundaries, then we could scroll it,
so we will always be able to interact with our game. So that's the dimensions API here and the dimensions API
really helps us build user interfaces that look good on different device sizes and as you learned, there
are different ways of using it - to dynamically calculate sizes, be that for width or height or margins
and also of course in if statements to simply render different content, attach different styles or different
style objects based on the width or height conditions you're setting up here
but that's not all because users might also change the device orientation while the app runs
and that also sometimes means that we need to change the styling and/or layout.