Hi, and welcome to this video about scaling functions in React Native.
Scaling functions are an important aspect
of creating responsive user interfaces for your mobile apps.
They allow you to make sure that your UI elements are properly sized and positioned
regardless of the size of the devices screen.
As you know, there are many different
types of mobile devices with varying screen sizes and resolutions.
Without scaling functions, your UI elements may look great on one
device but may be too small or too large on another.
Scaling functions will help you create a consistent and visually appealing
experience for your users, regardless of the device they use.
They also make it easier to maintain
and update your UI elements in the future, as you won't have to worry about manually
adjusting their size and position for each device.
We're going to be creating the scaling functions together,
and then we'll use them to rewrite our social media app using them.
By the end of this session, you'll have a solid understanding of how
to create scalable and responsive UIs for your react native apps.
By the way, this is something that's not freely available out there,
so this is definitely a bonus that comes with this course.
From now on, I highly suggest that you
always use the scaling functions when creating your own apps.
If you're going to be working with any company, you can certainly offer to use
these functions for their responsive UIs as well.
Now let's get to coding and create our scaling functions.
You're now looking at my screen with my editor opened and my simulator running.
Here's the code that we wrote the last time.
We're not going to be using this code
anymore, so we can just delete all of this setup.
Let's do it together.
We don't need this view container anymore.
We're all set and we're right back
to where we started from and we don't need these dimensions.
Today we're going to discuss the dimensions API and scaling functions.
Let's do that. This is a very interesting topic,
definitely, and it's going to help us a lot in making our screens responsive.
If I said that we should place scaling.js
file inside assets and styles, I don't think it would be the worst idea.
Let's create a new file here and call it scaling.js.
Here we're going to be importing the dimensions from React Native.
What we're going to do is determine
the width and the height of our window given here using the dimensions.get('window')
great, now we have the width and the height of the screen.
What we want to do first is determine whether the screen is small or not.
Let's create a function and say that it
is going to be small if width is less than or equal to 375.
The reason I choose the numbers
375, which might seem very arbitrary to you,
is that this refers to screen sizes for iPhone 6, iPhone 7, and iPhone 8.
So if it is less than that, we can consider that device small.
Yeah, this is an arbitrary choice of number.
However, I found that in practice it was
a very good number and I did have to do a lot of research about this.
You can use your own number and create complex calculations as you please.
This is why we're creating scaling functions.
This is going to be totally modifiable,
so you can do that or you can trust me and just go with number 375.
Great.
The next thing that we want to talk about is the device notch.
I do want to show you what the device notch exactly is.
Let me open that up for you.
Here's the device notch.
A notch on a device refers to a cutout or indentation at the top of the screen,
and it's usually housing the front-facing camera and other sensors.
It's a design feature that allows for more
screen space by removing the besel around the front-facing camera and other sensors.
Notches are commonly seen on modern
smartphones and can be in different shapes such as U-shaped or water drop shade.
They have become a more common design
element in recent years, allowing for larger displays in smaller devices.
Therefore, it is important for us to find out if the device has a notch or not.
We could get this information by installing a React Native library.
Let's just open up our terminals, go to social media.
I'm just going to clear this.
Here, what we want to do is
npm install react-native-device-info
and we're going to save this.
Right after we save this and it's
installed, Windows users just don't do anything.
But for macOS users, we're going to have to go to iOS folder and install pods.
For Windows users, I want to say that if we go to iOS folder and we're about to do
something, install pods, most probably, just don't do that because
it's not going to work for you and it might introduce some issues.
So never do that for any of the videos.
Let's just go to IOS folder and do pod install.
It will install one pod for you.
It might not install any pod for me, but it will be called RNDeviceInfo
the reason it doesn't install it for me is because I already have it installed.
Great.
Now what we want to do is determine if the device info
we're going to have to import it, so make sure to import it.
Say that it does not have a notch,
then it's most probably going to be a small device.
Great.
Now we are going to use this function.
And how we're going to use this function is going to be very interesting.
We're going to have more arbitrary numbers and just follow me.
What we're going to have to do is create a guideline base width.
And this base width is going to be
a number that we're going to use to determine the ratio between our actual
width of the screen with the guideline base width.
Once we create this ratio,
it's either going to be a number less than one or more than one.
I'm not going to confuse you more.
Let's just create this function and it's going to be called guideline base width.
It's also going to be something that is going to be based on five-inch devices.
We're going to check if the guideline...
If the device is small,
then what we want to return as a divider is going to be 330.
Our width right now, I think, was 344.
Now we're going to say that if the device is small, we want to return 330.
If it is bigger than we want to return 350.
What we're going to use this for is horizontal scaling.
Horizontal scaling will refer to anything that's horizontal: margin left,
margin right, margin horizontal, padding left, padding right, padding horizontal,
widths, everything that is horizontal on your
screen you're going to use this function for.
Let's create this function and let's call it horizontal scale.
Basically, what this function will do is
take in the size that we give to this function and make sure
that it uses our current width of the screen,
divide it with our guideline based width, and create so-called ratio.
This is either going to be less than one
or more than one and then multiply it by the size that we pass in.
We're going to use this horizontal scaling function, for example, with margin left.
We could say something like,
let's say we have a style and it's going to be something like margin left
and we're going to use horizontal scale and we're going to give it 10.
And then it will scale the horizontal items according to this ratio.
So that it looks good on every device. Hope you understand it.
But if not, we are going to use the scaling functions
for the whole application in the next video, so just stay tuned.
Now that we have the horizontal scaling function set up, what we want to do is use
the guideline base height and this is
going to be used for vertical items.
We're going to say if the device is small,
then we want to return 550.
If it is more than 410,
then we want to return 620, and otherwise, we want to return 680.
Again, these are based on the five-inch mobile screen size.
You can change up these numbers if you don't like them or if newer phones come
up, you can increase them or decrease them.
You have the full control over this.
You can do whatever you want with it.
Now let's create the vertical scaling function.
What it's going to do is also take in the size and we're going to use the height
that we currently have and use the guideline base heights that we just
created and make sure that we multiply this ratio by the size that we pass in.
Here the vertical scaling function would be used for anything that's vertical.
It would be margin top, margin bottom, margin vertical,
same with the paddings or the heights of the items that you might have set here.
This is what we're going to use vertical scaling for.
Then since we have this, we also need the fonts.
In the last video, you did see me use dimensions API for the fonts.
However, it was not the best example I just showed it to you for the sake
of understanding the dimensions API and how it works.
But right now we're going to do it a little bit differently.
Here we're also going to need the guideline base for fonts.
Then what we're going to do here is say that
if the width is more than 410, we want to return 430.
Otherwise, we're going to return 400.
Now that we have this, we want to create the function for scaling the fonts.
We can call it scale font size.
What we can do is take in the size and make sure that we use the rounded
numbers because font size needs to be rounded.
Let's do met. Round.
Here we're also going to take in the width because it's dependent on the width.
Then we're going to divide it by the guideline based funds,
and then we're going to multiply it by size and let's do it inside here.
Great. Now our fonts will be scaled as well
and what we want to do is make these functions exportable.
Let's do export horizontal scale, vertical scale and scale font size.
What I want to also mention that there are different packages that do this for you.
There are different libraries.
One of the examples I think is called react native responsive screen.
Why I don't use it is because it's outdated and newer phones are coming out
and newer React native versions are coming out.
When a library is not kept up to date,
it's going to introduce many problems for you.
Therefore, I just like to use the scaling functions that I set up myself.
If the newer devices come up, I can modify the scaling functions as I want.
I have full control over it, and now you have full control over it.
You can use it as you'd like over time as the devices are going to be developing.
In conclusions, scaling functions are
an essential tool for creating responsive UIs for your React native apps.
They allow you to ensure that your UI
elements look great and are properly sized and positioned on any device.
Let's get started on using these scaling functions on our social media application.
Thanks for watching and see you in the next video.