Hi, and welcome to this video on Dimensions API.
Many React native developers have
struggled with the dimensions in their apps, and I have good news for you
that with the use of Dimensions API, these problems can be resolved for you.
The Dimensions API is a module in React native that provides access to devices
dimensions like window size, screen size, and font scale.
This information is crucial when building
apps that need to respond to different screen sizes and resolutions.
It allows developers to create scalable and responsive applications.
With the ability to get the dimensions
of the device's screen, you can make informed decisions on how
to lay out your components, ensuring that your app looks good on any device.
Now, let's look at an example.
You're now looking at my screen
with my editor opened, my simulator running,
and you see the social media application that we worked in the last section.
If you don't have the latest code for it,
don't worry, you can always go to the Resources folder and download it.
Make sure to run it on appropriate
simulator, depending on your operating system.
If you're running on Windows, just run it on Android.
And if you're running on macOS, the choice is yours.
You can run it on Android or iOS simulator.
It doesn't really matter.
Now we're going to go over
the Dimensions API, and I just want to show you how it works.
If you import dimensions from React Native
and just set up a new constant, let's call it screen data and set screen
data and give it an initial state of dimensions.get('screen').
We console log this, screen data.
What you're going to see in your terminal
is the font scale, which is one, height, which is 844, scale three, and width 390.
Most importantly, what we're going to be using right now is height and width.
I do want to show you that this won't
change if we were to rotate our device into landscape mode.
If I do this, our width and height will not be updated.
This is because we haven't set up something that's called an event listener.
We got to do that on use effect.
We're going to say in the use effect that we want to listen to dimension
changes and you can add an event listener for this.
Every time the dimension changes, we can get the result back.
What we can do is set the screen data to the result.screen.
Now, if we save this and open up our terminal and reload it,
what we can get is new dimensions every time we rotate.
In the beginning, this had a width of 390, and now it has the width of 844.
There's various ways that you can use this information.
For example, if you had a little box set
up here using the view container, let's place a text here and let's say that
this box will have half of the screen's width and height.
Let's save this.
Let's give it some background color so that it's easily recognizable.
For example, red.
You're going to see right now that this takes the whole width and height.
But what you could do is use the screen
data and say that width should be screendata.
Width divided by two and height should be screendata.
Heights divided by two.
If we do this, you're going to see that this box takes
half of the height and half of the width of our simulator.
Now, if I were to rotate this, you will see that it's doing the same.
This is something that will help us
in making our application responsive, and you can use it for various things.
For example, you can also use it for text
and how text are handled on different devices.
For example, you can say that font size
will change according to the height of the screen.
You can say that screen data
dot heights divided by 20 determines the size of this font.
Here is the size of the font.
When we are in the portrait mode and if
we're in the landscape mode, this becomes way smaller.
In React Native, unfortunately,
we definitely need to think about the responsivity of our application,
whether it's concerning the width, height, or the font size.
Unfortunately, different devices are
handling the font sizes and width and heights differently.
We are going to have to scale this.
In the next lesson, we're going to go over how this is done.
There you have it, a simple yet effective
example of how you can use the Dimensions API in your React native app.
Whether you're building an app that needs to adapt to different screen sizes or just
want to improve the overall user experience, the Dimensions API is
a must-have tool in your React native development.
So if you haven't already given try to Dimensions API, try it today.
And I'll see you in the next video.
Happy coding. Thanks for watching.