1 00:00:02,230 --> 00:00:04,920 Sometimes however, you just can't get the layout right 2 00:00:04,930 --> 00:00:10,720 with percentage width and hardcoded pixels like this, sometimes you really need to know how many pixels 3 00:00:10,720 --> 00:00:12,210 you have available, 4 00:00:12,340 --> 00:00:18,130 for example here on the buttons where we set a width of 100, we set 100 no matter what 5 00:00:18,130 --> 00:00:19,990 the device size is. 6 00:00:19,990 --> 00:00:24,460 Now actually, we know that we want to have two buttons sit next to each other. 7 00:00:24,550 --> 00:00:31,960 So what we can do is we can simply ensure that we take a button width that always fits on the screen 8 00:00:31,960 --> 00:00:33,830 no matter how small that is 9 00:00:33,850 --> 00:00:39,460 and for that, we need to find out how many pixels we have available in width and that's something 10 00:00:39,460 --> 00:00:44,170 we can find out with the help of React Native. There from React Native, 11 00:00:44,170 --> 00:00:48,880 you can import the dimensions object here, dimensions is the name. 12 00:00:48,940 --> 00:00:55,720 Now this is now not a component which you use, instead this is an object that allows you to find out how much 13 00:00:55,810 --> 00:00:58,380 width you have available. 14 00:00:58,420 --> 00:01:04,270 Now we can use this for example down there where we set our button width, instead of setting it like this, 15 00:01:04,780 --> 00:01:07,080 we can set our width to dimensions 16 00:01:07,210 --> 00:01:12,850 and then there is a get method where you can get the dimensions of the window. 17 00:01:12,850 --> 00:01:14,440 You can also get it of the screen, 18 00:01:14,440 --> 00:01:21,700 the difference between window and screen only matters on Android where with window, the status bar height 19 00:01:21,700 --> 00:01:23,640 will be excluded from the calculation 20 00:01:23,740 --> 00:01:26,110 and therefore this will be really, well 21 00:01:26,260 --> 00:01:28,720 the part of the screen where your content will live in. 22 00:01:28,780 --> 00:01:32,130 So you should typically use window here because on iOS it doesn't matter, 23 00:01:32,130 --> 00:01:38,800 on Android is guaranteed to be the part of the screen your UI really sits in without that status 24 00:01:38,800 --> 00:01:40,110 bar at the top. 25 00:01:40,180 --> 00:01:46,390 So typically, you might want to use window here to get the real room you have available for your layout, 26 00:01:46,390 --> 00:01:52,600 the real dimensions you can use for your layout. Now what this gives you is an object where you can get 27 00:01:52,750 --> 00:01:56,470 a couple of properties, four to be precise - 28 00:01:56,470 --> 00:02:01,540 the font scale the user set up, so for example if users want to have a bigger fonts, then you could get 29 00:02:01,540 --> 00:02:03,560 the multiplier here with font scale 30 00:02:03,670 --> 00:02:09,610 but most importantly, you get the width and the height and if we get the width here, then we get the overall 31 00:02:09,610 --> 00:02:11,050 width of the device 32 00:02:11,050 --> 00:02:12,580 this app runs on. 33 00:02:12,580 --> 00:02:19,390 Now we know we want to squeeze at least two buttons into this device here, so we could simply divide 34 00:02:19,390 --> 00:02:19,800 this by 35 00:02:19,800 --> 00:02:25,730 two, so now that each button is half as wide as the device. 36 00:02:25,730 --> 00:02:30,190 Now if we save this, we don't really get the look we want because of course, that's too big 37 00:02:30,190 --> 00:02:35,620 but if we divide this by three for example, then this already looks better on the small screen, not on 38 00:02:35,620 --> 00:02:37,060 the big one though 39 00:02:37,060 --> 00:02:42,520 but how about four? If we take four, then we have plenty of space for all the other space we need like 40 00:02:42,520 --> 00:02:49,690 the spacing around our container and we ensure that our buttons always kind of respect the device size. 41 00:02:49,720 --> 00:02:55,510 Now of course here, you could have achieved something similar by setting width to a percentage, like 40% 42 00:02:55,510 --> 00:03:00,760 here but I also wanted to introduce the dimensions API here which we will use later as 43 00:03:00,760 --> 00:03:01,550 well. 44 00:03:01,570 --> 00:03:07,480 It's a great API for finding out how many pixels you have available on the width and on the height 45 00:03:07,870 --> 00:03:09,140 on the device or running on 46 00:03:09,190 --> 00:03:15,670 and that's important, where percentage here always refers to the direct parent view and not always 47 00:03:15,670 --> 00:03:17,560 to the available width of the device, 48 00:03:17,650 --> 00:03:20,880 that only is the case on the topmost parent 49 00:03:20,890 --> 00:03:28,330 so to say, so on the topmost view you're rendering. Dimensions get window always gives you the dimensions for 50 00:03:28,330 --> 00:03:30,750 the entire device, no matter where you use it. 51 00:03:30,760 --> 00:03:38,480 So width here always is the width of our screen on the device and never of the parent or anything else. 52 00:03:38,560 --> 00:03:43,390 So this can be really useful if you want to style something in a certain way or size something in a 53 00:03:43,390 --> 00:03:48,100 certain way because this tells you how much width you have available.