WEBVTT

1
00:00:00.240 --> 00:00:01.580
Hi and welcome back.

2
00:00:01.610 --> 00:00:05.490
Now that we have worked on our Hello World
application, I want to talk to you

3
00:00:05.520 --> 00:00:08.780
a little bit about what
this setup really means.

4
00:00:08.810 --> 00:00:14.660
In every React native project file using
which we're going to be displaying

5
00:00:14.690 --> 00:00:18.700
anything on the screen,
whether they're components or screens

6
00:00:18.720 --> 00:00:23.300
themselves, such as the app screen itself,
we're going to need to import react

7
00:00:23.330 --> 00:00:27.700
from the React library because
React Native is built on top of React.

8
00:00:27.730 --> 00:00:29.780
When you import React from React in your

9
00:00:29.800 --> 00:00:32.340
React Native project,
you are essentially importing the core

10
00:00:32.370 --> 00:00:35.540
react library,
which provides the foundation for building

11
00:00:35.570 --> 00:00:38.860
components and handling
states in our application.

12
00:00:38.890 --> 00:00:41.220
Without this import, we're not going to be

13
00:00:41.250 --> 00:00:45.340
able to use any of the core React APIs
for our React native project.

14
00:00:45.370 --> 00:00:47.780
So this is a very important line.

15
00:00:47.810 --> 00:00:52.900
Now, the second line here we
import safe area view and text.

16
00:00:52.930 --> 00:00:55.940
Well, Text probably
tells you what it does.

17
00:00:55.970 --> 00:01:00.100
It's used to display text on the screen,

18
00:01:00.130 --> 00:01:02.820
but we don't really know
what Safe Area View does.

19
00:01:02.850 --> 00:01:05.410
So what happens if I just delete this?

20
00:01:05.440 --> 00:01:06.930
Safe Area view, right?

21
00:01:06.960 --> 00:01:09.820
Why do I have it in here
in the first place?

22
00:01:09.850 --> 00:01:13.820
If I do, that Android project looks fine,

23
00:01:13.850 --> 00:01:17.490
but for iOS,
you're going to see that the top bar

24
00:01:17.520 --> 00:01:20.340
displaying the information is
going to be totally discarded.

25
00:01:20.370 --> 00:01:22.140
It's not going to be accounted for.

26
00:01:22.170 --> 00:01:26.260
And Hello World Text is actually going
to appear right inside the header,

27
00:01:26.290 --> 00:01:32.020
behind the WiFi status and the carrier
status of the phone, which is

28
00:01:32.050 --> 00:01:36.060
not something that we
want to let our user see.

29
00:01:36.090 --> 00:01:41.540
So Safe Area View is a component
that provides a way to render content

30
00:01:41.570 --> 00:01:46.360
within the safe area
boundaries of a device.

31
00:01:46.920 --> 00:01:51.460
Safe Area View is especially important
when designing mobile applications as it

32
00:01:51.490 --> 00:01:55.740
ensures that your content is not obscured
by device specific elements such as

33
00:01:55.770 --> 00:01:59.740
the status bar, home indicator,
or rounded borders.

34
00:01:59.770 --> 00:02:03.210
When we use Safe Area View in our
React Native project,

35
00:02:03.240 --> 00:02:07.180
we can be sure that our application's
content is displayed within the visible

36
00:02:07.210 --> 00:02:11.860
portion of the device's screen, regardless
of the device type or screen size.

37
00:02:11.890 --> 00:02:15.980
And this helps to ensure that our app
looks and functions correctly on all

38
00:02:16.010 --> 00:02:20.500
devices without any awkward or
unattractive visual elements.

39
00:02:20.530 --> 00:02:23.890
So this is what we did right here

40
00:02:23.920 --> 00:02:27.520
and that is why we used
Safe Area View and Text components.

41
00:02:27.550 --> 00:02:29.540
Right here we're going to go into how

42
00:02:29.570 --> 00:02:34.660
to style these components and how to use more
different components and essentially what

43
00:02:34.690 --> 00:02:38.500
components are in React Native
in the upcoming sections.

44
00:02:38.530 --> 00:02:40.700
So thanks a lot for watching.

45
00:02:40.730 --> 00:02:42.320
See you in the next video.