Hi and welcome back.
Today, we're going to get started
with using the scaling functions that we designed together.
Please make sure that you restart all of your command line interfaces,
terminate your Metro bundlers because we installed the React Native
device info and it would be great if we start from scratch
and run the application again to make sure that we don't face any issues.
For that, I'm going to go to social media.
I'm going to my terminal and then I'm
going to run this on iOS and everybody that has Windows just run it on Android.
Great.
My application was successfully built and my Metro Bundler is running.
Now we can get started with using our scaling functions.
The most important thing that we have to do right now is convert every instance
of using any kind of dimensions with the scaling function.
Let's convert them and let's start with our components.
Here I'm going to get started with the style.js file and we have the font size.
I'm going to use scale font size function that we designed together.
It's going to be automatically imported
for me, so make sure to import it yourself as well.
I'm going to save it.
If you see, let's explore turned a little bit smaller.
That's totally fine.
Let's just continue on and go to the user post.
Here we have margin left and margin left and margin right is horizontal alignment.
Therefore, we're going to have to use horizontal scaling for this.
Let's use horizontal scale
and it's going to be automatically imported for me again.
You can see it right here.
I'm going to put the 10 inside here
and now our user text container should change its margin left.
Let's save this.
Here we see that Allison Becker has moved a little bit to the right side.
Great, let's continue on and let's explore the font size of the username after that.
We're going to use scale font size
for this and it's going to be automatically imported for me again.
I'm going to save this and the usernames are going to scale.
After that, let's go to the location and scale our margin left here.
We see that we have negative margin left here.
I think that we could get rid of that if I go here and delete the space right here.
If I do that, I could just get rid of this
margin left negative completely and it will be fine.
We don't even need that.
Let's continue on with the font size and use scale font size right here.
Let's save this and then let's use the vertical scaling
for margin top because margin top and margin bottom are vertical.
We're going to use vertical scale for this.
It's also going to be automatically imported for me.
Let's save this and everything's looking great.
Now let's go to the post image and this is also vertical.
We're going to use vertical scale for this.
Let's save this.
We have seen a little bit of a change here.
Now let's go to a user post container and here we have padding bottom.
Padding bottom and oops, margin top both are vertical scaling functions.
Let's use these and let's use vertical scale here as well.
Vertical scale.
Perfect.
We don't need to convert border bottom width of one.
One is a very small number, so there's no real need to do that.
Let's go to User PostTabs and here we see margin left, which is horizontal.
We're going to use horizontal scale for this.
Let's save this.
Now we're going to do the same with margin
left because that's also a horizontal alignment.
Let's use horizontal scale here and let's save this.
Let's do the same here with the margin left.
It is three, but let's still use it.
Here we go. Perfect.
Now that we have this file converted, we can just go to the user post and make
sure that we didn't use any dimensions here.
And we actually did.
We used image dimensions with 48.
Let's talk about the image dimensions.
It includes width, height, and the border.
We got to choose something and stick with it.
It's neither really horizontal, neither really vertical.
What we're going to do here is say that
for items that are using dimensions that affect all
directions, we are always going to use horizontal scale.
You can also choose to always use vertical
scale, but once you choose one, just stick with it.
I'm just going to choose horizontal scale
and use that for profile image, and we see here that this became a little bigger.
Here we also have the size of the fontawesome icon.
I am going to use scale font size here as well.
It will be automatically imported for me.
Make sure that these are imported for you as well.
Let's save this.
Great, everything's looking perfect.
Let's go into title.js and make sure we had nothing there and we did have nothing there.
We're done with two components so far.
Now let's go into the user profile image.
Here, everything will be automatically
scaled because we did pass it already in a scaled way.
We can just completely skip this unless we
have something in style.js file and we see here that we actually have padding.
Since padding is affecting horizontal
and vertical directions and we chose to always stick
with horizontal scale in this case, I'm going to use that.
And it's going to be automatically imported for me.
Make sure it is for you as well.
I'm going to save this now.
We don't really need Get font Family import here.
I don't know why I had it here, so I'm going to delete it.
Now I'm going to go into User Profile, Image, and we're done here.
Now we want to style the user stories with these new scaling functions.
Margin right is horizontal alignment.
We're going to use horizontal scale and this will be imported for me.
For the font size, I'm going to use scale
font size, and it is also automatically imported for me.
For the margin top,
we're going to use vertical scale and it will be also automatically imported.
Just keep importing these functions as you need to.
Great. Now let's go to the user story.
Here we see that we have image dimensions here as well.
Let's use horizontal scaling for this as well and save this.
Now these stories became so much bigger.
Perfect.
This is going really well.
Now what we want to do is go to the app.js
file as well because we have modified all of these items here.
Let's go here and make sure that we don't need to do something same here.
We do actually, here's the font size
inside the list header component for this icon here.
We're going to need to use the scale font size function for this.
Let's do that and save it.
It became a little bit bigger.
Now what we want to do is explore the other items for the flat list here.
We don't have any dimensions, so we're totally good there.
Now let's explore if we have anything
for user post and doesn't really seem like it.
Great.
Now let's not forget about the global style.
Let's go here and make sure that we convert this as well.
We have the header here and it has margin left 27.
Let's use horizontal scale for this and save it.
Great.
Now we're going to use the same for margin right.
Let's save this.
Then we have margin top, which is going to be vertical scaling.
Now we're going to use for message icon,
horizontal scaling since we decided to stick with this.
For border radius,
I'm going to use horizontal scale as well because it affects all the directions.
Now for message number container,
width and height, since this is intended to be square,
I'm not going to use the horizontal scaling for width and height.
So if I do that, if I use horizontal scaling for width,
which I normally would, and then I use vertical scaling
for height, you might notice that this is not going to be really a circle anymore.
It's got to be the same function that we call when we want to make a square.
So I'm going to use horizontal scale
and stick with it again, and I'm going to do same for the border radius.
And for the right side, I'm actually going to use the horizontal
scale and for top, I am going to use vertical scale.
If we need to make this number a little different, that would be totally fine.
And we do, let's make this 10 as well and now it's looking much better.
Great. Now let's go to message number and we're
going to have to scale this font size as well.
Let's do that and save it.
Then let's go to user story container
and for margin top, I'm going to use vertical scale and
for margin horizontal, I am going to use horizontal scale.
Great.
This is looking much better.
For user post container, I am going to use horizontal scaling as well.
Let's save this and that's it.
We have definitely modified all
of the dimensions that we have in this application.
If you ask me, this is looking really great.
This is it on using the scaling functions.
From now on, anytime we create any dimensions inside our social media
for the next section, we're definitely going to be using
horizontal scale, vertical scale, and scaling the font size.
If this looks a little bit different
compared to the design, if we don't see exactly four items, that's totally fine.
As long as the design is consistent with the other devices as well,
we're going to be totally fine with this design.
That's it. Thank you so much for watching.
In the next video, we're going to be discussing many more interesting topics.
Stay tuned and happy coding.