WEBVTT 00:00:00.000 --> 00:00:01.620 Hi and welcome back. 00:00:01.640 --> 00:00:03.040 Today, we're going to get started 00:00:03.070 --> 00:00:06.100 with using the scaling functions that we designed together. 00:00:06.130 --> 00:00:11.580 Please make sure that you restart all of your command line interfaces, 00:00:11.610 --> 00:00:15.860 terminate your Metro bundlers because we installed the React Native 00:00:15.890 --> 00:00:20.180 device info and it would be great if we start from scratch 00:00:20.210 --> 00:00:24.780 and run the application again to make sure that we don't face any issues. 00:00:24.810 --> 00:00:28.780 For that, I'm going to go to social media. 00:00:28.810 --> 00:00:31.880 I'm going to my terminal and then I'm 00:00:31.900 --> 00:00:38.100 going to run this on iOS and everybody that has Windows just run it on Android. 00:00:38.120 --> 00:00:38.480 Great. 00:00:38.500 --> 00:00:42.020 My application was successfully built and my Metro Bundler is running. 00:00:42.050 --> 00:00:45.860 Now we can get started with using our scaling functions. 00:00:45.890 --> 00:00:50.360 The most important thing that we have to do right now is convert every instance 00:00:50.390 --> 00:00:55.120 of using any kind of dimensions with the scaling function. 00:00:55.150 --> 00:00:58.300 Let's convert them and let's start with our components. 00:00:58.330 --> 00:01:03.660 Here I'm going to get started with the style.js file and we have the font size. 00:01:03.680 --> 00:01:07.760 I'm going to use scale font size function that we designed together. 00:01:07.760 --> 00:01:09.620 It's going to be automatically imported 00:01:09.650 --> 00:01:12.490 for me, so make sure to import it yourself as well. 00:01:12.520 --> 00:01:13.770 I'm going to save it. 00:01:13.800 --> 00:01:18.380 If you see, let's explore turned a little bit smaller. 00:01:18.400 --> 00:01:19.360 That's totally fine. 00:01:19.390 --> 00:01:23.180 Let's just continue on and go to the user post. 00:01:23.210 --> 00:01:29.000 Here we have margin left and margin left and margin right is horizontal alignment. 00:01:29.030 --> 00:01:32.700 Therefore, we're going to have to use horizontal scaling for this. 00:01:32.730 --> 00:01:34.850 Let's use horizontal scale 00:01:34.880 --> 00:01:37.760 and it's going to be automatically imported for me again. 00:01:37.790 --> 00:01:39.850 You can see it right here. 00:01:39.880 --> 00:01:42.540 I'm going to put the 10 inside here 00:01:42.570 --> 00:01:47.740 and now our user text container should change its margin left. 00:01:47.770 --> 00:01:49.380 Let's save this. 00:01:49.410 --> 00:01:54.060 Here we see that Allison Becker has moved a little bit to the right side. 00:01:54.090 --> 00:02:00.570 Great, let's continue on and let's explore the font size of the username after that. 00:02:00.600 --> 00:02:02.400 We're going to use scale font size 00:02:02.430 --> 00:02:07.760 for this and it's going to be automatically imported for me again. 00:02:07.790 --> 00:02:12.170 I'm going to save this and the usernames are going to scale. 00:02:12.200 --> 00:02:16.780 After that, let's go to the location and scale our margin left here. 00:02:16.810 --> 00:02:21.450 We see that we have negative margin left here. 00:02:21.480 --> 00:02:29.060 I think that we could get rid of that if I go here and delete the space right here. 00:02:29.090 --> 00:02:31.720 If I do that, I could just get rid of this 00:02:31.750 --> 00:02:35.820 margin left negative completely and it will be fine. 00:02:35.850 --> 00:02:37.300 We don't even need that. 00:02:37.330 --> 00:02:43.220 Let's continue on with the font size and use scale font size right here. 00:02:43.250 --> 00:02:48.840 Let's save this and then let's use the vertical scaling 00:02:48.870 --> 00:02:54.260 for margin top because margin top and margin bottom are vertical. 00:02:54.290 --> 00:02:57.560 We're going to use vertical scale for this. 00:02:58.200 --> 00:03:01.140 It's also going to be automatically imported for me. 00:03:01.170 --> 00:03:04.540 Let's save this and everything's looking great. 00:03:04.570 --> 00:03:08.780 Now let's go to the post image and this is also vertical. 00:03:08.810 --> 00:03:11.740 We're going to use vertical scale for this. 00:03:11.770 --> 00:03:13.560 Let's save this. 00:03:13.880 --> 00:03:17.100 We have seen a little bit of a change here. 00:03:17.130 --> 00:03:22.100 Now let's go to a user post container and here we have padding bottom. 00:03:22.130 --> 00:03:27.820 Padding bottom and oops, margin top both are vertical scaling functions. 00:03:27.850 --> 00:03:35.460 Let's use these and let's use vertical scale here as well. 00:03:35.490 --> 00:03:39.320 Vertical scale. 00:03:40.840 --> 00:03:42.060 Perfect. 00:03:42.090 --> 00:03:45.160 We don't need to convert border bottom width of one. 00:03:45.190 --> 00:03:48.660 One is a very small number, so there's no real need to do that. 00:03:48.690 --> 00:03:53.980 Let's go to User PostTabs and here we see margin left, which is horizontal. 00:03:54.010 --> 00:03:57.500 We're going to use horizontal scale for this. 00:03:57.530 --> 00:03:59.100 Let's save this. 00:03:59.120 --> 00:04:00.920 Now we're going to do the same with margin 00:04:00.950 --> 00:04:04.610 left because that's also a horizontal alignment. 00:04:04.640 --> 00:04:08.460 Let's use horizontal scale here and let's save this. 00:04:08.490 --> 00:04:11.000 Let's do the same here with the margin left. 00:04:11.030 --> 00:04:14.140 It is three, but let's still use it. 00:04:14.170 --> 00:04:16.540 Here we go. Perfect. 00:04:16.570 --> 00:04:21.900 Now that we have this file converted, we can just go to the user post and make 00:04:21.920 --> 00:04:24.400 sure that we didn't use any dimensions here. 00:04:24.420 --> 00:04:25.560 And we actually did. 00:04:25.590 --> 00:04:30.120 We used image dimensions with 48. 00:04:30.120 --> 00:04:31.800 Let's talk about the image dimensions. 00:04:31.830 --> 00:04:35.580 It includes width, height, and the border. 00:04:35.600 --> 00:04:38.420 We got to choose something and stick with it. 00:04:38.450 --> 00:04:41.940 It's neither really horizontal, neither really vertical. 00:04:41.970 --> 00:04:45.180 What we're going to do here is say that 00:04:45.210 --> 00:04:50.380 for items that are using dimensions that affect all 00:04:50.410 --> 00:04:54.080 directions, we are always going to use horizontal scale. 00:04:54.100 --> 00:04:56.980 You can also choose to always use vertical 00:04:57.010 --> 00:05:00.420 scale, but once you choose one, just stick with it. 00:05:00.450 --> 00:05:03.020 I'm just going to choose horizontal scale 00:05:03.040 --> 00:05:07.700 and use that for profile image, and we see here that this became a little bigger. 00:05:07.720 --> 00:05:11.260 Here we also have the size of the fontawesome icon. 00:05:11.280 --> 00:05:15.700 I am going to use scale font size here as well. 00:05:15.720 --> 00:05:18.200 It will be automatically imported for me. 00:05:18.220 --> 00:05:20.900 Make sure that these are imported for you as well. 00:05:20.920 --> 00:05:22.180 Let's save this. 00:05:22.210 --> 00:05:24.620 Great, everything's looking perfect. 00:05:24.650 --> 00:05:29.600 Let's go into title.js and make sure we had nothing there and we did have nothing there. 00:05:29.630 --> 00:05:32.060 We're done with two components so far. 00:05:32.090 --> 00:05:34.620 Now let's go into the user profile image. 00:05:34.650 --> 00:05:36.660 Here, everything will be automatically 00:05:36.690 --> 00:05:41.260 scaled because we did pass it already in a scaled way. 00:05:41.290 --> 00:05:43.520 We can just completely skip this unless we 00:05:43.540 --> 00:05:48.000 have something in style.js file and we see here that we actually have padding. 00:05:48.030 --> 00:05:51.120 Since padding is affecting horizontal 00:05:51.150 --> 00:05:55.500 and vertical directions and we chose to always stick 00:05:55.530 --> 00:05:59.660 with horizontal scale in this case, I'm going to use that. 00:05:59.690 --> 00:06:02.640 And it's going to be automatically imported for me. 00:06:02.640 --> 00:06:04.120 Make sure it is for you as well. 00:06:04.150 --> 00:06:05.980 I'm going to save this now. 00:06:06.000 --> 00:06:08.320 We don't really need Get font Family import here. 00:06:08.350 --> 00:06:11.820 I don't know why I had it here, so I'm going to delete it. 00:06:11.850 --> 00:06:17.460 Now I'm going to go into User Profile, Image, and we're done here. 00:06:17.480 --> 00:06:23.400 Now we want to style the user stories with these new scaling functions. 00:06:23.420 --> 00:06:26.620 Margin right is horizontal alignment. 00:06:26.640 --> 00:06:29.920 We're going to use horizontal scale and this will be imported for me. 00:06:29.950 --> 00:06:32.640 For the font size, I'm going to use scale 00:06:32.670 --> 00:06:36.380 font size, and it is also automatically imported for me. 00:06:36.400 --> 00:06:37.320 For the margin top, 00:06:37.350 --> 00:06:41.220 we're going to use vertical scale and it will be also automatically imported. 00:06:41.250 --> 00:06:44.580 Just keep importing these functions as you need to. 00:06:44.600 --> 00:06:47.380 Great. Now let's go to the user story. 00:06:47.400 --> 00:06:50.080 Here we see that we have image dimensions here as well. 00:06:50.100 --> 00:06:55.000 Let's use horizontal scaling for this as well and save this. 00:06:55.030 --> 00:06:58.020 Now these stories became so much bigger. 00:06:58.040 --> 00:06:59.100 Perfect. 00:06:59.130 --> 00:07:00.900 This is going really well. 00:07:00.920 --> 00:07:04.400 Now what we want to do is go to the app.js 00:07:04.420 --> 00:07:08.100 file as well because we have modified all of these items here. 00:07:08.130 --> 00:07:12.480 Let's go here and make sure that we don't need to do something same here. 00:07:12.510 --> 00:07:15.100 We do actually, here's the font size 00:07:15.130 --> 00:07:18.960 inside the list header component for this icon here. 00:07:18.980 --> 00:07:24.420 We're going to need to use the scale font size function for this. 00:07:24.450 --> 00:07:26.860 Let's do that and save it. 00:07:26.890 --> 00:07:29.020 It became a little bit bigger. 00:07:29.040 --> 00:07:34.280 Now what we want to do is explore the other items for the flat list here. 00:07:34.300 --> 00:07:37.780 We don't have any dimensions, so we're totally good there. 00:07:37.800 --> 00:07:39.800 Now let's explore if we have anything 00:07:39.830 --> 00:07:42.460 for user post and doesn't really seem like it. 00:07:42.480 --> 00:07:42.840 Great. 00:07:42.860 --> 00:07:45.620 Now let's not forget about the global style. 00:07:45.650 --> 00:07:49.020 Let's go here and make sure that we convert this as well. 00:07:49.040 --> 00:07:53.060 We have the header here and it has margin left 27. 00:07:53.090 --> 00:07:58.220 Let's use horizontal scale for this and save it. 00:07:58.240 --> 00:07:58.900 Great. 00:07:58.920 --> 00:08:03.100 Now we're going to use the same for margin right. 00:08:03.130 --> 00:08:04.060 Let's save this. 00:08:04.090 --> 00:08:09.020 Then we have margin top, which is going to be vertical scaling. 00:08:09.040 --> 00:08:12.200 Now we're going to use for message icon, 00:08:12.230 --> 00:08:16.360 horizontal scaling since we decided to stick with this. 00:08:16.840 --> 00:08:17.960 For border radius, 00:08:17.980 --> 00:08:23.620 I'm going to use horizontal scale as well because it affects all the directions. 00:08:23.650 --> 00:08:25.760 Now for message number container, 00:08:25.790 --> 00:08:29.920 width and height, since this is intended to be square, 00:08:29.950 --> 00:08:35.060 I'm not going to use the horizontal scaling for width and height. 00:08:35.080 --> 00:08:38.500 So if I do that, if I use horizontal scaling for width, 00:08:38.530 --> 00:08:42.620 which I normally would, and then I use vertical scaling 00:08:42.650 --> 00:08:47.480 for height, you might notice that this is not going to be really a circle anymore. 00:08:47.510 --> 00:08:51.920 It's got to be the same function that we call when we want to make a square. 00:08:51.940 --> 00:08:53.760 So I'm going to use horizontal scale 00:08:53.790 --> 00:08:58.460 and stick with it again, and I'm going to do same for the border radius. 00:08:58.490 --> 00:09:02.940 And for the right side, I'm actually going to use the horizontal 00:09:02.970 --> 00:09:07.520 scale and for top, I am going to use vertical scale. 00:09:07.550 --> 00:09:13.380 If we need to make this number a little different, that would be totally fine. 00:09:13.410 --> 00:09:18.380 And we do, let's make this 10 as well and now it's looking much better. 00:09:18.400 --> 00:09:20.640 Great. Now let's go to message number and we're 00:09:20.670 --> 00:09:23.200 going to have to scale this font size as well. 00:09:23.230 --> 00:09:25.980 Let's do that and save it. 00:09:26.010 --> 00:09:28.120 Then let's go to user story container 00:09:28.150 --> 00:09:31.980 and for margin top, I'm going to use vertical scale and 00:09:32.010 --> 00:09:36.980 for margin horizontal, I am going to use horizontal scale. 00:09:37.000 --> 00:09:38.060 Great. 00:09:38.080 --> 00:09:40.040 This is looking much better. 00:09:40.060 --> 00:09:46.260 For user post container, I am going to use horizontal scaling as well. 00:09:46.290 --> 00:09:49.540 Let's save this and that's it. 00:09:49.560 --> 00:09:51.840 We have definitely modified all 00:09:51.870 --> 00:09:54.940 of the dimensions that we have in this application. 00:09:54.970 --> 00:09:57.740 If you ask me, this is looking really great. 00:09:57.770 --> 00:10:00.780 This is it on using the scaling functions. 00:10:00.810 --> 00:10:06.620 From now on, anytime we create any dimensions inside our social media 00:10:06.640 --> 00:10:09.200 for the next section, we're definitely going to be using 00:10:09.230 --> 00:10:14.300 horizontal scale, vertical scale, and scaling the font size. 00:10:14.320 --> 00:10:16.120 If this looks a little bit different 00:10:16.150 --> 00:10:21.980 compared to the design, if we don't see exactly four items, that's totally fine. 00:10:22.010 --> 00:10:27.060 As long as the design is consistent with the other devices as well, 00:10:27.080 --> 00:10:29.300 we're going to be totally fine with this design. 00:10:29.320 --> 00:10:31.320 That's it. Thank you so much for watching. 00:10:31.350 --> 00:10:35.420 In the next video, we're going to be discussing many more interesting topics. 00:10:35.440 --> 00:10:37.400 Stay tuned and happy coding.