Sometimes however, you just can't get the layout right
with percentage width and hardcoded pixels like this, sometimes you really need to know how many pixels
you have available,
for example here on the buttons where we set a width of 100, we set 100 no matter what
the device size is.
Now actually, we know that we want to have two buttons sit next to each other.
So what we can do is we can simply ensure that we take a button width that always fits on the screen
no matter how small that is
and for that, we need to find out how many pixels we have available in width and that's something
we can find out with the help of React Native. There from React Native,
you can import the dimensions object here, dimensions is the name.
Now this is now not a component which you use, instead this is an object that allows you to find out how much
width you have available.
Now we can use this for example down there where we set our button width, instead of setting it like this,
we can set our width to dimensions
and then there is a get method where you can get the dimensions of the window.
You can also get it of the screen,
the difference between window and screen only matters on Android where with window, the status bar height
will be excluded from the calculation
and therefore this will be really, well
the part of the screen where your content will live in.
So you should typically use window here because on iOS it doesn't matter,
on Android is guaranteed to be the part of the screen your UI really sits in without that status
bar at the top.
So typically, you might want to use window here to get the real room you have available for your layout,
the real dimensions you can use for your layout. Now what this gives you is an object where you can get
a couple of properties, four to be precise -
the font scale the user set up, so for example if users want to have a bigger fonts, then you could get
the multiplier here with font scale
but most importantly, you get the width and the height and if we get the width here, then we get the overall
width of the device
this app runs on.
Now we know we want to squeeze at least two buttons into this device here, so we could simply divide
this by
two, so now that each button is half as wide as the device.
Now if we save this, we don't really get the look we want because of course, that's too big
but if we divide this by three for example, then this already looks better on the small screen, not on
the big one though
but how about four? If we take four, then we have plenty of space for all the other space we need like
the spacing around our container and we ensure that our buttons always kind of respect the device size.
Now of course here, you could have achieved something similar by setting width to a percentage, like 40%
here but I also wanted to introduce the dimensions API here which we will use later as
well.
It's a great API for finding out how many pixels you have available on the width and on the height
on the device or running on
and that's important, where percentage here always refers to the direct parent view and not always
to the available width of the device,
that only is the case on the topmost parent
so to say, so on the topmost view you're rendering. Dimensions get window always gives you the dimensions for
the entire device, no matter where you use it.
So width here always is the width of our screen on the device and never of the parent or anything else.
So this can be really useful if you want to style something in a certain way or size something in a
certain way because this tells you how much width you have available.