WEBVTT

1
00:00:00.160 --> 00:00:03.860
Hi and welcome to our tutorial
on the view component in React native

2
00:00:03.890 --> 00:00:08.300
for beginners. React native provides a set
of core components that can be used

3
00:00:08.330 --> 00:00:11.380
to create the layout
and behavior of your app.

4
00:00:11.410 --> 00:00:16.060
In this video we'll be discussing the view
component and providing examples of how it

5
00:00:16.080 --> 00:00:19.780
is used in React native to create
a layout and why it is important

6
00:00:19.810 --> 00:00:22.620
component. The view component in React

7
00:00:22.650 --> 00:00:27.740
native is a fundamental building block
for creating layout of React native app.

8
00:00:27.760 --> 00:00:30.300
It works similarly to the div element

9
00:00:30.330 --> 00:00:34.940
in web development in that it can be used
as a container for other components

10
00:00:34.960 --> 00:00:37.940
and can be used to apply
styles to the layout.

11
00:00:37.960 --> 00:00:40.140
The view component can be used to create

12
00:00:40.170 --> 00:00:43.420
different types of layouts
such as a grid or a stack.

13
00:00:43.450 --> 00:00:48.260
For example, you can use multiple view
components to create a grid of items or

14
00:00:48.290 --> 00:00:51.860
you can use a single view component
to create a stack of items.

15
00:00:51.890 --> 00:00:53.860
The view component can also be used

16
00:00:53.890 --> 00:00:58.740
to create a responsive design which is
important for ensuring that your app look

17
00:00:58.770 --> 00:01:01.700
good on different devices
and screen sizes.

18
00:01:01.730 --> 00:01:05.410
We're going to discuss this topic
more once we dive into Flexbox

19
00:01:05.440 --> 00:01:07.490
layout for React native.

20
00:01:07.520 --> 00:01:09.840
In React native the layout of an app is

21
00:01:09.870 --> 00:01:13.930
defined using a tree like structure
of components where the view component

22
00:01:13.960 --> 00:01:17.050
acts as the container
for other components.

23
00:01:17.080 --> 00:01:19.440
This allows you to create nested structure

24
00:01:19.470 --> 00:01:24.490
of components where each component
defines a specific part of the layout.

25
00:01:24.520 --> 00:01:26.700
The view component can also be used

26
00:01:26.730 --> 00:01:30.260
to apply styles to the layout
using the style prop.

27
00:01:30.290 --> 00:01:34.060
This allows you to easily control
the layout and appearance of your app.

28
00:01:34.090 --> 00:01:38.290
Now I quickly want to demonstrate the use
of view component in React native.

29
00:01:38.320 --> 00:01:42.020
Now you're looking at my screen where I
have my simulator open,

30
00:01:42.050 --> 00:01:47.420
I have my metro running and you see
my editor here and in my editor we're

31
00:01:47.450 --> 00:01:50.140
exactly at the point where
we left off the last time.

32
00:01:50.170 --> 00:01:52.340
Now what I want to do is divide our screen

33
00:01:52.370 --> 00:01:57.740
into different layouts because that's one
of the main uses of the view component.

34
00:01:57.770 --> 00:02:00.700
So let's say that we want our app

35
00:02:00.730 --> 00:02:04.900
to contain a header,
we want our app to have the main body

36
00:02:04.930 --> 00:02:07.820
section and then we want
it to have the footer.

37
00:02:07.850 --> 00:02:09.940
What we're going to be doing for this is

38
00:02:09.970 --> 00:02:14.300
we're going to be creating
the containers using the view component.

39
00:02:14.330 --> 00:02:19.580
So let's first import the view component
here and then let's use this view

40
00:02:19.610 --> 00:02:22.500
component to say that this
is going to be our header.

41
00:02:22.530 --> 00:02:24.420
Now if we were to save this,

42
00:02:24.450 --> 00:02:28.340
you're going to see that nothing
is changing in our simulator.

43
00:02:28.370 --> 00:02:33.340
We still are going to have our green text
displayed exactly as we did before

44
00:02:33.370 --> 00:02:37.140
and the view component is
not going to take any space.

45
00:02:37.170 --> 00:02:39.700
However, if we were to use this view

46
00:02:39.730 --> 00:02:45.220
component to say that this is our header,
we could just put in a text here saying

47
00:02:45.250 --> 00:02:50.540
that this is going to be
our header container.

48
00:02:50.570 --> 00:02:55.260
Okay, now we're going to get error
because I haven't imported the text.

49
00:02:55.290 --> 00:02:58.300
So this is going to be
our header container.

50
00:02:58.330 --> 00:03:00.380
Now what we want to do is also create

51
00:03:00.410 --> 00:03:03.860
a body container where our
main content is going to go.

52
00:03:03.890 --> 00:03:06.060
We can just create this view component

53
00:03:06.090 --> 00:03:10.780
here and pretend that the text that we
have here, hello, react native world is

54
00:03:10.810 --> 00:03:13.220
the thing that we want
to have in our body.

55
00:03:13.240 --> 00:03:14.980
And now we're going to have a container

56
00:03:15.010 --> 00:03:18.980
for our main content
which is going to be this.

57
00:03:19.010 --> 00:03:25.980
We can also copy and paste this component
multiple styles, which is going to be one

58
00:03:26.010 --> 00:03:31.300
of the main benefits of reusability
that our components offer us.

59
00:03:31.330 --> 00:03:34.420
And you're going to see
multiple text appear here.

60
00:03:34.450 --> 00:03:36.460
And we can also create another view

61
00:03:36.490 --> 00:03:40.060
component that's going to have
a text as well inside it

62
00:03:40.090 --> 00:03:46.780
and we're going to say that this is going
to be our footer saying that all rights

63
00:03:46.810 --> 00:03:52.060
reserved. You have an ability to apply
styles to these views as well.

64
00:03:52.090 --> 00:03:54.340
We could create a style and say that we

65
00:03:54.370 --> 00:03:59.220
want the background color
for this to be blue.

66
00:03:59.250 --> 00:04:03.380
Now you're going to see
that our header is blue.

67
00:04:03.410 --> 00:04:05.940
You can also give it some height,

68
00:04:05.970 --> 00:04:11.580
let's say 100, and this is how
much space is going to take.

69
00:04:11.610 --> 00:04:15.060
You can do the same to these
view containers here.

70
00:04:15.090 --> 00:04:21.700
For example, if we were to say that we
want our background color here to be gray,

71
00:04:21.720 --> 00:04:25.620
we'll be seeing the gray
background for our container.

72
00:04:25.640 --> 00:04:26.980
That's it for our tutorial.

73
00:04:27.010 --> 00:04:30.980
On the view component in react native,
you should now have a basic understanding

74
00:04:31.010 --> 00:04:34.660
of what the view component is,
how it is used to create a layout,

75
00:04:34.690 --> 00:04:38.260
and why it is an important
component for react native.

76
00:04:38.280 --> 00:04:42.420
Remember that the view component is
a fundamental building block and it can be

77
00:04:42.450 --> 00:04:46.220
used to create a consistent
and responsive layout for your app.

78
00:04:46.240 --> 00:04:48.320
Thanks for watching and see
you in the next video.