Hi, and welcome to this video on styling status bars in React native applications.
In this tutorial, we'll be discussing how to style the status bar in your React
native apps to create a seamless and professional-looking user interface.
The status bar is the bar at the top of the screen given right here.
The information that you might see
in the status bar is the time, battery life, and network status.
React native applications allows the status bar to be styled to match
the overall look and feel of your application.
In order to do that, first,
we are going to delete some of the items that we have created in the last video.
I just want to get rid of this excess code.
Let's delete the switch component
from here and the setters for it, and we are not going to need some import.
So let's get rid of these as well.
Let's save this, and now our application is back to normal.
If we want to use status bars, we're actually going to have to import
status bar from React Native, and I would like to show you how to use it.
Inside the safe area view,
as the first component, what we can do is use status bar.
If we were just to import this, nothing would really change.
It would look the same way as it looked before.
However, let's say that you would like to change the color of the status bar.
Please observe how to do this.
You are going to create a background color and we're going to set it to red.
If you look at the Android simulator,
you're going to see that this is actually going to change in color.
If you look at iOS simulator,
you're going to observe that it's going to stay the same color.
Now, this is something that's totally fine.
This happens mainly because iOS devices, status bar are automatically already
transparent and there is specific property that you could use to change how it looks.
For example, what you could do is say
that you have this specific bar style, and if you set this to dark content,
you're going to observe that this text here will remain black.
If I save this,
nothing will really change, but it would change on Android as well.
If you specifically say that this is going
to be dark content, the Android text will change to black.
I'll change to black as well if you observed this was white before.
But let's say that you want this to be white on both devices.
What you can do is set this to light content.
If I were to save this, you're going to see all of this disappear on iOS.
Let me save this.
Here you see that nothing's displayed anymore.
You might have seen it just for a second that when the application was loading
and there was a blue bar there, it was turned to white color.
But right now it's just not visible
because we also have white background for this application setup.
This is how you control the color
of the status bar in React Native for both iOS and Android.
Now you know how to style them.
Remember that this is an important part
of the user interface, and it's essential to style it in a way
that complements the overall look and feel of your application.
That's the end of this section on building responsive UIs in React Native.
In the next session,
we'll be discussing navigation to ensure that you can create multiple pages
for your applications and navigate between them.
Thank you so much for watching.
You've done amazing in this section, and I'll see you in the next video.