WEBVTT 00:00:00.240 --> 00:00:03.980 Hi, and welcome to this video about scaling functions in React Native. 00:00:04.000 --> 00:00:05.740 Scaling functions are an important aspect 00:00:05.770 --> 00:00:09.380 of creating responsive user interfaces for your mobile apps. 00:00:09.400 --> 00:00:13.120 They allow you to make sure that your UI elements are properly sized and positioned 00:00:13.150 --> 00:00:16.300 regardless of the size of the devices screen. 00:00:16.320 --> 00:00:17.760 As you know, there are many different 00:00:17.790 --> 00:00:21.860 types of mobile devices with varying screen sizes and resolutions. 00:00:21.890 --> 00:00:25.200 Without scaling functions, your UI elements may look great on one 00:00:25.230 --> 00:00:29.060 device but may be too small or too large on another. 00:00:29.080 --> 00:00:32.280 Scaling functions will help you create a consistent and visually appealing 00:00:32.310 --> 00:00:36.620 experience for your users, regardless of the device they use. 00:00:36.640 --> 00:00:38.280 They also make it easier to maintain 00:00:38.310 --> 00:00:42.880 and update your UI elements in the future, as you won't have to worry about manually 00:00:42.910 --> 00:00:46.100 adjusting their size and position for each device. 00:00:46.120 --> 00:00:48.800 We're going to be creating the scaling functions together, 00:00:48.830 --> 00:00:52.540 and then we'll use them to rewrite our social media app using them. 00:00:52.560 --> 00:00:55.720 By the end of this session, you'll have a solid understanding of how 00:00:55.750 --> 00:00:59.660 to create scalable and responsive UIs for your react native apps. 00:00:59.680 --> 00:01:03.400 By the way, this is something that's not freely available out there, 00:01:03.400 --> 00:01:06.130 so this is definitely a bonus that comes with this course. 00:01:06.160 --> 00:01:08.640 From now on, I highly suggest that you 00:01:08.670 --> 00:01:12.020 always use the scaling functions when creating your own apps. 00:01:12.040 --> 00:01:15.640 If you're going to be working with any company, you can certainly offer to use 00:01:15.670 --> 00:01:19.540 these functions for their responsive UIs as well. 00:01:19.570 --> 00:01:22.780 Now let's get to coding and create our scaling functions. 00:01:22.810 --> 00:01:27.400 You're now looking at my screen with my editor opened and my simulator running. 00:01:27.400 --> 00:01:29.440 Here's the code that we wrote the last time. 00:01:29.440 --> 00:01:31.160 We're not going to be using this code 00:01:31.190 --> 00:01:34.570 anymore, so we can just delete all of this setup. 00:01:34.600 --> 00:01:35.640 Let's do it together. 00:01:35.670 --> 00:01:38.850 We don't need this view container anymore. 00:01:38.880 --> 00:01:40.780 We're all set and we're right back 00:01:40.810 --> 00:01:44.000 to where we started from and we don't need these dimensions. 00:01:44.030 --> 00:01:48.460 Today we're going to discuss the dimensions API and scaling functions. 00:01:48.490 --> 00:01:51.520 Let's do that. This is a very interesting topic, 00:01:51.550 --> 00:01:56.260 definitely, and it's going to help us a lot in making our screens responsive. 00:01:56.290 --> 00:01:58.724 If I said that we should place scaling.js 00:01:58.924 --> 00:02:02.760 file inside assets and styles, I don't think it would be the worst idea. 00:02:02.790 --> 00:02:06.620 Let's create a new file here and call it scaling.js. 00:02:06.650 --> 00:02:11.840 Here we're going to be importing the dimensions from React Native. 00:02:11.870 --> 00:02:13.680 What we're going to do is determine 00:02:13.710 --> 00:02:19.730 the width and the height of our window given here using the dimensions.get('window') 00:02:21.730 --> 00:02:24.600 great, now we have the width and the height of the screen. 00:02:24.600 --> 00:02:28.060 What we want to do first is determine whether the screen is small or not. 00:02:28.090 --> 00:02:30.660 Let's create a function and say that it 00:02:30.690 --> 00:02:37.380 is going to be small if width is less than or equal to 375. 00:02:37.410 --> 00:02:40.060 The reason I choose the numbers 00:02:40.090 --> 00:02:43.380 375, which might seem very arbitrary to you, 00:02:43.410 --> 00:02:49.180 is that this refers to screen sizes for iPhone 6, iPhone 7, and iPhone 8. 00:02:49.210 --> 00:02:54.700 So if it is less than that, we can consider that device small. 00:02:54.720 --> 00:02:56.840 Yeah, this is an arbitrary choice of number. 00:02:56.870 --> 00:02:59.080 However, I found that in practice it was 00:02:59.110 --> 00:03:03.780 a very good number and I did have to do a lot of research about this. 00:03:03.810 --> 00:03:09.460 You can use your own number and create complex calculations as you please. 00:03:09.480 --> 00:03:11.400 This is why we're creating scaling functions. 00:03:11.400 --> 00:03:13.200 This is going to be totally modifiable, 00:03:13.230 --> 00:03:18.340 so you can do that or you can trust me and just go with number 375. 00:03:18.360 --> 00:03:18.780 Great. 00:03:18.810 --> 00:03:21.960 The next thing that we want to talk about is the device notch. 00:03:21.990 --> 00:03:26.140 I do want to show you what the device notch exactly is. 00:03:26.170 --> 00:03:28.180 Let me open that up for you. 00:03:28.210 --> 00:03:29.820 Here's the device notch. 00:03:29.850 --> 00:03:34.040 A notch on a device refers to a cutout or indentation at the top of the screen, 00:03:34.070 --> 00:03:38.060 and it's usually housing the front-facing camera and other sensors. 00:03:38.090 --> 00:03:40.400 It's a design feature that allows for more 00:03:40.430 --> 00:03:45.260 screen space by removing the besel around the front-facing camera and other sensors. 00:03:45.280 --> 00:03:47.000 Notches are commonly seen on modern 00:03:47.030 --> 00:03:51.220 smartphones and can be in different shapes such as U-shaped or water drop shade. 00:03:51.250 --> 00:03:53.360 They have become a more common design 00:03:53.390 --> 00:03:57.240 element in recent years, allowing for larger displays in smaller devices. 00:03:57.270 --> 00:04:01.400 Therefore, it is important for us to find out if the device has a notch or not. 00:04:01.430 --> 00:04:05.860 We could get this information by installing a React Native library. 00:04:05.890 --> 00:04:11.610 Let's just open up our terminals, go to social media. 00:04:11.640 --> 00:04:13.580 I'm just going to clear this. 00:04:13.610 --> 00:04:16.118 Here, what we want to do is 00:04:16.318 --> 00:04:17.140 npm install react-native-device-info 00:04:17.160 --> 00:04:22.340 and we're going to save this. 00:04:22.360 --> 00:04:24.660 Right after we save this and it's 00:04:24.690 --> 00:04:27.320 installed, Windows users just don't do anything. 00:04:27.340 --> 00:04:32.020 But for macOS users, we're going to have to go to iOS folder and install pods. 00:04:32.040 --> 00:04:36.780 For Windows users, I want to say that if we go to iOS folder and we're about to do 00:04:36.800 --> 00:04:41.660 something, install pods, most probably, just don't do that because 00:04:41.680 --> 00:04:44.820 it's not going to work for you and it might introduce some issues. 00:04:44.840 --> 00:04:47.860 So never do that for any of the videos. 00:04:47.890 --> 00:04:51.360 Let's just go to IOS folder and do pod install. 00:04:51.390 --> 00:04:53.420 It will install one pod for you. 00:04:53.450 --> 00:04:59.100 It might not install any pod for me, but it will be called RNDeviceInfo 00:04:59.120 --> 00:05:03.020 the reason it doesn't install it for me is because I already have it installed. 00:05:03.040 --> 00:05:04.180 Great. 00:05:04.210 --> 00:05:09.500 Now what we want to do is determine if the device info 00:05:09.530 --> 00:05:13.100 we're going to have to import it, so make sure to import it. 00:05:13.130 --> 00:05:16.120 Say that it does not have a notch, 00:05:16.150 --> 00:05:21.900 then it's most probably going to be a small device. 00:05:21.920 --> 00:05:23.460 Great. 00:05:23.480 --> 00:05:25.680 Now we are going to use this function. 00:05:25.710 --> 00:05:29.900 And how we're going to use this function is going to be very interesting. 00:05:29.920 --> 00:05:33.100 We're going to have more arbitrary numbers and just follow me. 00:05:33.130 --> 00:05:36.940 What we're going to have to do is create a guideline base width. 00:05:36.970 --> 00:05:39.280 And this base width is going to be 00:05:39.300 --> 00:05:45.280 a number that we're going to use to determine the ratio between our actual 00:05:45.300 --> 00:05:50.040 width of the screen with the guideline base width. 00:05:50.060 --> 00:05:51.360 Once we create this ratio, 00:05:51.390 --> 00:05:56.780 it's either going to be a number less than one or more than one. 00:05:56.800 --> 00:05:59.040 I'm not going to confuse you more. 00:05:59.070 --> 00:06:03.740 Let's just create this function and it's going to be called guideline base width. 00:06:03.770 --> 00:06:08.180 It's also going to be something that is going to be based on five-inch devices. 00:06:08.210 --> 00:06:12.620 We're going to check if the guideline... 00:06:12.650 --> 00:06:16.620 If the device is small, 00:06:16.650 --> 00:06:21.320 then what we want to return as a divider is going to be 330. 00:06:21.350 --> 00:06:26.140 Our width right now, I think, was 344. 00:06:26.170 --> 00:06:31.480 Now we're going to say that if the device is small, we want to return 330. 00:06:31.510 --> 00:06:35.360 If it is bigger than we want to return 350. 00:06:35.390 --> 00:06:38.800 What we're going to use this for is horizontal scaling. 00:06:38.830 --> 00:06:43.160 Horizontal scaling will refer to anything that's horizontal: margin left, 00:06:43.190 --> 00:06:47.940 margin right, margin horizontal, padding left, padding right, padding horizontal, 00:06:47.970 --> 00:06:51.060 widths, everything that is horizontal on your 00:06:51.090 --> 00:06:53.660 screen you're going to use this function for. 00:06:53.690 --> 00:06:57.300 Let's create this function and let's call it horizontal scale. 00:06:57.330 --> 00:06:59.480 Basically, what this function will do is 00:06:59.510 --> 00:07:06.080 take in the size that we give to this function and make sure 00:07:06.100 --> 00:07:10.540 that it uses our current width of the screen, 00:07:10.570 --> 00:07:16.420 divide it with our guideline based width, and create so-called ratio. 00:07:16.440 --> 00:07:18.280 This is either going to be less than one 00:07:18.300 --> 00:07:22.580 or more than one and then multiply it by the size that we pass in. 00:07:22.600 --> 00:07:26.920 We're going to use this horizontal scaling function, for example, with margin left. 00:07:26.950 --> 00:07:28.820 We could say something like, 00:07:28.850 --> 00:07:34.420 let's say we have a style and it's going to be something like margin left 00:07:34.450 --> 00:07:39.020 and we're going to use horizontal scale and we're going to give it 10. 00:07:39.040 --> 00:07:44.940 And then it will scale the horizontal items according to this ratio. 00:07:44.970 --> 00:07:48.220 So that it looks good on every device. Hope you understand it. 00:07:48.250 --> 00:07:50.880 But if not, we are going to use the scaling functions 00:07:50.910 --> 00:07:54.700 for the whole application in the next video, so just stay tuned. 00:07:54.730 --> 00:07:59.040 Now that we have the horizontal scaling function set up, what we want to do is use 00:07:59.070 --> 00:08:02.512 the guideline base height and this is 00:08:02.712 --> 00:08:05.860 going to be used for vertical items. 00:08:05.890 --> 00:08:08.964 We're going to say if the device is small, 00:08:09.164 --> 00:08:10.940 then we want to return 550. 00:08:10.970 --> 00:08:14.620 If it is more than 410, 00:08:14.650 --> 00:08:21.060 then we want to return 620, and otherwise, we want to return 680. 00:08:21.090 --> 00:08:25.660 Again, these are based on the five-inch mobile screen size. 00:08:25.680 --> 00:08:29.360 You can change up these numbers if you don't like them or if newer phones come 00:08:29.360 --> 00:08:30.960 up, you can increase them or decrease them. 00:08:30.980 --> 00:08:33.300 You have the full control over this. 00:08:33.320 --> 00:08:35.780 You can do whatever you want with it. 00:08:35.810 --> 00:08:39.260 Now let's create the vertical scaling function. 00:08:39.290 --> 00:08:44.480 What it's going to do is also take in the size and we're going to use the height 00:08:44.510 --> 00:08:48.300 that we currently have and use the guideline base heights that we just 00:08:48.320 --> 00:08:52.900 created and make sure that we multiply this ratio by the size that we pass in. 00:08:52.930 --> 00:08:57.160 Here the vertical scaling function would be used for anything that's vertical. 00:08:57.190 --> 00:09:01.420 It would be margin top, margin bottom, margin vertical, 00:09:01.440 --> 00:09:05.760 same with the paddings or the heights of the items that you might have set here. 00:09:05.790 --> 00:09:09.180 This is what we're going to use vertical scaling for. 00:09:09.200 --> 00:09:12.160 Then since we have this, we also need the fonts. 00:09:12.190 --> 00:09:16.980 In the last video, you did see me use dimensions API for the fonts. 00:09:17.010 --> 00:09:20.880 However, it was not the best example I just showed it to you for the sake 00:09:20.910 --> 00:09:23.660 of understanding the dimensions API and how it works. 00:09:23.690 --> 00:09:27.100 But right now we're going to do it a little bit differently. 00:09:27.130 --> 00:09:32.860 Here we're also going to need the guideline base for fonts. 00:09:32.890 --> 00:09:37.740 Then what we're going to do here is say that 00:09:37.770 --> 00:09:42.940 if the width is more than 410, we want to return 430. 00:09:42.970 --> 00:09:45.440 Otherwise, we're going to return 400. 00:09:45.470 --> 00:09:49.980 Now that we have this, we want to create the function for scaling the fonts. 00:09:50.010 --> 00:09:54.140 We can call it scale font size. 00:09:54.170 --> 00:09:58.440 What we can do is take in the size and make sure that we use the rounded 00:09:58.470 --> 00:10:01.220 numbers because font size needs to be rounded. 00:10:01.250 --> 00:10:03.300 Let's do met. Round. 00:10:03.320 --> 00:10:07.720 Here we're also going to take in the width because it's dependent on the width. 00:10:07.750 --> 00:10:11.860 Then we're going to divide it by the guideline based funds, 00:10:11.890 --> 00:10:17.180 and then we're going to multiply it by size and let's do it inside here. 00:10:17.200 --> 00:10:19.400 Great. Now our fonts will be scaled as well 00:10:19.430 --> 00:10:22.280 and what we want to do is make these functions exportable. 00:10:22.310 --> 00:10:29.140 Let's do export horizontal scale, vertical scale and scale font size. 00:10:29.170 --> 00:10:34.280 What I want to also mention that there are different packages that do this for you. 00:10:34.310 --> 00:10:35.840 There are different libraries. 00:10:35.870 --> 00:10:39.780 One of the examples I think is called react native responsive screen. 00:10:39.810 --> 00:10:44.960 Why I don't use it is because it's outdated and newer phones are coming out 00:10:44.990 --> 00:10:47.640 and newer React native versions are coming out. 00:10:47.670 --> 00:10:50.520 When a library is not kept up to date, 00:10:50.550 --> 00:10:53.740 it's going to introduce many problems for you. 00:10:53.770 --> 00:10:58.480 Therefore, I just like to use the scaling functions that I set up myself. 00:10:58.510 --> 00:11:02.360 If the newer devices come up, I can modify the scaling functions as I want. 00:11:02.390 --> 00:11:07.020 I have full control over it, and now you have full control over it. 00:11:07.050 --> 00:11:13.700 You can use it as you'd like over time as the devices are going to be developing. 00:11:13.730 --> 00:11:15.640 In conclusions, scaling functions are 00:11:15.670 --> 00:11:19.860 an essential tool for creating responsive UIs for your React native apps. 00:11:19.890 --> 00:11:22.320 They allow you to ensure that your UI 00:11:22.350 --> 00:11:27.020 elements look great and are properly sized and positioned on any device. 00:11:27.050 --> 00:11:32.900 Let's get started on using these scaling functions on our social media application. 00:11:32.920 --> 00:11:35.200 Thanks for watching and see you in the next video.