WEBVTT 00:00:00.360 --> 00:00:03.580 Hi, and welcome to this video on Dimensions API. 00:00:03.610 --> 00:00:05.300 Many React native developers have 00:00:05.320 --> 00:00:08.440 struggled with the dimensions in their apps, and I have good news for you 00:00:08.470 --> 00:00:13.140 that with the use of Dimensions API, these problems can be resolved for you. 00:00:13.170 --> 00:00:17.740 The Dimensions API is a module in React native that provides access to devices 00:00:17.760 --> 00:00:21.740 dimensions like window size, screen size, and font scale. 00:00:21.760 --> 00:00:23.940 This information is crucial when building 00:00:23.970 --> 00:00:28.420 apps that need to respond to different screen sizes and resolutions. 00:00:28.450 --> 00:00:32.780 It allows developers to create scalable and responsive applications. 00:00:32.800 --> 00:00:34.360 With the ability to get the dimensions 00:00:34.390 --> 00:00:37.840 of the device's screen, you can make informed decisions on how 00:00:37.870 --> 00:00:42.500 to lay out your components, ensuring that your app looks good on any device. 00:00:42.530 --> 00:00:44.660 Now, let's look at an example. 00:00:44.680 --> 00:00:45.920 You're now looking at my screen 00:00:45.950 --> 00:00:48.280 with my editor opened, my simulator running, 00:00:48.280 --> 00:00:51.940 and you see the social media application that we worked in the last section. 00:00:51.960 --> 00:00:53.760 If you don't have the latest code for it, 00:00:53.760 --> 00:00:56.780 don't worry, you can always go to the Resources folder and download it. 00:00:56.810 --> 00:00:58.560 Make sure to run it on appropriate 00:00:58.590 --> 00:01:01.520 simulator, depending on your operating system. 00:01:01.550 --> 00:01:04.210 If you're running on Windows, just run it on Android. 00:01:04.240 --> 00:01:06.850 And if you're running on macOS, the choice is yours. 00:01:06.880 --> 00:01:10.040 You can run it on Android or iOS simulator. 00:01:10.070 --> 00:01:11.570 It doesn't really matter. 00:01:11.600 --> 00:01:12.920 Now we're going to go over 00:01:12.950 --> 00:01:16.460 the Dimensions API, and I just want to show you how it works. 00:01:16.490 --> 00:01:18.880 If you import dimensions from React Native 00:01:18.910 --> 00:01:25.570 and just set up a new constant, let's call it screen data and set screen 00:01:25.600 --> 00:01:33.480 data and give it an initial state of dimensions.get('screen'). 00:01:33.680 --> 00:01:39.900 We console log this, screen data. 00:01:39.930 --> 00:01:41.980 What you're going to see in your terminal 00:01:42.010 --> 00:01:52.460 is the font scale, which is one, height, which is 844, scale three, and width 390. 00:01:52.490 --> 00:01:57.490 Most importantly, what we're going to be using right now is height and width. 00:01:57.520 --> 00:02:01.260 I do want to show you that this won't 00:02:01.290 --> 00:02:06.140 change if we were to rotate our device into landscape mode. 00:02:06.170 --> 00:02:13.060 If I do this, our width and height will not be updated. 00:02:13.090 --> 00:02:18.820 This is because we haven't set up something that's called an event listener. 00:02:18.850 --> 00:02:21.440 We got to do that on use effect. 00:02:21.470 --> 00:02:26.240 We're going to say in the use effect that we want to listen to dimension 00:02:26.270 --> 00:02:29.500 changes and you can add an event listener for this. 00:02:29.530 --> 00:02:33.730 Every time the dimension changes, we can get the result back. 00:02:33.760 --> 00:02:44.860 What we can do is set the screen data to the result.screen. 00:02:44.890 --> 00:02:50.140 Now, if we save this and open up our terminal and reload it, 00:02:50.170 --> 00:02:55.340 what we can get is new dimensions every time we rotate. 00:02:55.370 --> 00:03:02.100 In the beginning, this had a width of 390, and now it has the width of 844. 00:03:02.130 --> 00:03:06.220 There's various ways that you can use this information. 00:03:06.250 --> 00:03:09.400 For example, if you had a little box set 00:03:09.430 --> 00:03:14.610 up here using the view container, let's place a text here and let's say that 00:03:14.640 --> 00:03:23.460 this box will have half of the screen's width and height. 00:03:23.490 --> 00:03:24.940 Let's save this. 00:03:24.970 --> 00:03:29.400 Let's give it some background color so that it's easily recognizable. 00:03:29.430 --> 00:03:33.080 For example, red. 00:03:33.440 --> 00:03:36.320 You're going to see right now that this takes the whole width and height. 00:03:36.350 --> 00:03:38.360 But what you could do is use the screen 00:03:38.390 --> 00:03:42.460 data and say that width should be screendata. 00:03:42.490 --> 00:03:48.140 Width divided by two and height should be screendata. 00:03:48.170 --> 00:03:49.820 Heights divided by two. 00:03:49.850 --> 00:03:52.940 If we do this, you're going to see that this box takes 00:03:52.970 --> 00:03:57.480 half of the height and half of the width of our simulator. 00:03:57.510 --> 00:04:02.900 Now, if I were to rotate this, you will see that it's doing the same. 00:04:02.930 --> 00:04:05.280 This is something that will help us 00:04:05.310 --> 00:04:10.120 in making our application responsive, and you can use it for various things. 00:04:10.150 --> 00:04:13.460 For example, you can also use it for text 00:04:13.490 --> 00:04:17.260 and how text are handled on different devices. 00:04:17.280 --> 00:04:19.280 For example, you can say that font size 00:04:19.300 --> 00:04:22.940 will change according to the height of the screen. 00:04:22.970 --> 00:04:25.780 You can say that screen data 00:04:25.800 --> 00:04:30.740 dot heights divided by 20 determines the size of this font. 00:04:30.770 --> 00:04:33.420 Here is the size of the font. 00:04:33.450 --> 00:04:36.000 When we are in the portrait mode and if 00:04:36.030 --> 00:04:40.380 we're in the landscape mode, this becomes way smaller. 00:04:40.410 --> 00:04:42.800 In React Native, unfortunately, 00:04:42.830 --> 00:04:48.100 we definitely need to think about the responsivity of our application, 00:04:48.130 --> 00:04:52.060 whether it's concerning the width, height, or the font size. 00:04:52.090 --> 00:04:54.560 Unfortunately, different devices are 00:04:54.590 --> 00:04:59.220 handling the font sizes and width and heights differently. 00:04:59.250 --> 00:05:01.560 We are going to have to scale this. 00:05:01.590 --> 00:05:06.220 In the next lesson, we're going to go over how this is done. 00:05:06.250 --> 00:05:08.900 There you have it, a simple yet effective 00:05:08.920 --> 00:05:13.340 example of how you can use the Dimensions API in your React native app. 00:05:13.360 --> 00:05:16.840 Whether you're building an app that needs to adapt to different screen sizes or just 00:05:16.860 --> 00:05:20.920 want to improve the overall user experience, the Dimensions API is 00:05:20.950 --> 00:05:24.420 a must-have tool in your React native development. 00:05:24.450 --> 00:05:30.080 So if you haven't already given try to Dimensions API, try it today. 00:05:30.100 --> 00:05:31.980 And I'll see you in the next video. 00:05:32.010 --> 00:05:33.840 Happy coding. Thanks for watching.