WEBVTT

00:00:00.600 --> 00:00:05.060
Hi, and welcome to this video on styling
status bars in React native applications.

00:00:05.090 --> 00:00:09.360
In this tutorial, we'll be discussing how
to style the status bar in your React

00:00:09.390 --> 00:00:13.940
native apps to create a seamless
and professional-looking user interface.

00:00:13.970 --> 00:00:18.540
The status bar is the bar at the top
of the screen given right here.

00:00:18.560 --> 00:00:20.720
The information that you might see

00:00:20.740 --> 00:00:25.380
in the status bar is the time,
battery life, and network status.

00:00:25.400 --> 00:00:29.480
React native applications allows
the status bar to be styled to match

00:00:29.510 --> 00:00:32.700
the overall look and feel
of your application.

00:00:32.730 --> 00:00:34.160
In order to do that, first,

00:00:34.180 --> 00:00:38.580
we are going to delete some of the items
that we have created in the last video.

00:00:38.610 --> 00:00:40.720
I just want to get rid
of this excess code.

00:00:40.750 --> 00:00:42.880
Let's delete the switch component

00:00:42.910 --> 00:00:47.160
from here and the setters for it,
and we are not going to need some import.

00:00:47.180 --> 00:00:49.060
So let's get rid of these as well.

00:00:49.090 --> 00:00:52.220
Let's save this, and now our
application is back to normal.

00:00:52.250 --> 00:00:56.020
If we want to use status bars,
we're actually going to have to import

00:00:56.050 --> 00:01:00.580
status bar from React Native, and I
would like to show you how to use it.

00:01:00.610 --> 00:01:02.620
Inside the safe area view,

00:01:02.650 --> 00:01:06.410
as the first component,
what we can do is use status bar.

00:01:06.440 --> 00:01:09.980
If we were just to import this,
nothing would really change.

00:01:10.010 --> 00:01:12.900
It would look the same
way as it looked before.

00:01:12.930 --> 00:01:17.180
However, let's say that you would like
to change the color of the status bar.

00:01:17.210 --> 00:01:19.180
Please observe how to do this.

00:01:19.210 --> 00:01:23.100
You are going to create a background
color and we're going to set it to red.

00:01:23.130 --> 00:01:26.160
If you look at the Android simulator,

00:01:26.190 --> 00:01:29.620
you're going to see that this is
actually going to change in color.

00:01:29.650 --> 00:01:31.980
If you look at iOS simulator,

00:01:32.010 --> 00:01:35.930
you're going to observe that it's
going to stay the same color.

00:01:35.960 --> 00:01:38.260
Now, this is something
that's totally fine.

00:01:38.290 --> 00:01:44.000
This happens mainly because iOS devices,
status bar are automatically already

00:01:44.030 --> 00:01:51.260
transparent and there is specific property
that you could use to change how it looks.

00:01:51.290 --> 00:01:53.880
For example, what you could do is say

00:01:53.910 --> 00:01:58.560
that you have this specific bar style,
and if you set this to dark content,

00:01:58.590 --> 00:02:03.540
you're going to observe that
this text here will remain black.

00:02:03.570 --> 00:02:04.520
If I save this,

00:02:04.550 --> 00:02:08.780
nothing will really change,
but it would change on Android as well.

00:02:08.810 --> 00:02:11.280
If you specifically say that this is going

00:02:11.310 --> 00:02:15.080
to be dark content, the Android
text will change to black.

00:02:15.110 --> 00:02:18.660
I'll change to black as well if you
observed this was white before.

00:02:18.690 --> 00:02:23.240
But let's say that you want this
to be white on both devices.

00:02:23.270 --> 00:02:25.800
What you can do is set
this to light content.

00:02:25.830 --> 00:02:30.610
If I were to save this, you're going
to see all of this disappear on iOS.

00:02:30.640 --> 00:02:32.220
Let me save this.

00:02:32.250 --> 00:02:35.380
Here you see that nothing's
displayed anymore.

00:02:35.410 --> 00:02:39.280
You might have seen it just for a second
that when the application was loading

00:02:39.310 --> 00:02:43.940
and there was a blue bar there,
it was turned to white color.

00:02:43.970 --> 00:02:45.920
But right now it's just not visible

00:02:45.950 --> 00:02:51.180
because we also have white background
for this application setup.

00:02:51.210 --> 00:02:54.160
This is how you control the color

00:02:54.190 --> 00:02:59.140
of the status bar in React Native
for both iOS and Android.

00:02:59.170 --> 00:03:00.880
Now you know how to style them.

00:03:00.910 --> 00:03:03.720
Remember that this is an important part

00:03:03.750 --> 00:03:07.380
of the user interface,
and it's essential to style it in a way

00:03:07.410 --> 00:03:10.820
that complements the overall look
and feel of your application.

00:03:10.850 --> 00:03:14.740
That's the end of this section on building
responsive UIs in React Native.

00:03:14.770 --> 00:03:15.800
In the next session,

00:03:15.830 --> 00:03:19.820
we'll be discussing navigation to ensure
that you can create multiple pages

00:03:19.850 --> 00:03:22.280
for your applications
and navigate between them.

00:03:22.310 --> 00:03:23.900
Thank you so much for watching.

00:03:23.920 --> 00:03:27.320
You've done amazing in this section,
and I'll see you in the next video.