WEBVTT

00:00:00.000 --> 00:00:01.260
Hi, and welcome back.

00:00:01.290 --> 00:00:04.980
Today, we're going to be talking about
Stack Navigation in React Native.

00:00:05.000 --> 00:00:06.720
Stack navigation is a powerful tool

00:00:06.750 --> 00:00:10.700
that allows you to create multiple
pages within your React Native app.

00:00:10.730 --> 00:00:12.800
It works by stacking the different pages

00:00:12.830 --> 00:00:16.820
on top of each other, so you can
easily navigate between them.

00:00:16.850 --> 00:00:20.860
But why would you want to use
stack navigation in your app?

00:00:20.890 --> 00:00:21.900
Well, it's simple.

00:00:21.920 --> 00:00:23.040
With stack navigation,

00:00:23.070 --> 00:00:27.260
you can create a seamless and intuitive
user experience for your users.

00:00:27.290 --> 00:00:31.580
No more confusing navigation or losing
track of where you are in the app.

00:00:31.600 --> 00:00:32.720
With the Stack Navigation,

00:00:32.750 --> 00:00:37.220
you can easily keep track of your pages
and navigate between them with ease.

00:00:37.250 --> 00:00:39.200
Now let's get started with installing

00:00:39.230 --> 00:00:42.900
the Stack Navigator for our
social media project.

00:00:42.930 --> 00:00:46.340
Here we're just going to open up this menu

00:00:46.370 --> 00:00:50.500
and then let's go to Navigators
and click on Stack Navigator.

00:00:50.530 --> 00:00:52.640
This link will be also placed inside

00:00:52.670 --> 00:00:55.220
the Resources folder,
so you can always use that.

00:00:55.250 --> 00:01:00.780
Here you have a display of how the Stack
Navigator actually works, which is great.

00:01:00.810 --> 00:01:03.960
You can really see that you
get the back button feel.

00:01:03.990 --> 00:01:08.620
For example, for iOS and Android,
you can always slide from left to right

00:01:08.650 --> 00:01:14.460
to go back, and gestures are automatically
coming with the Stack Navigator.

00:01:14.490 --> 00:01:17.850
Let's just start with the
installation process.

00:01:17.880 --> 00:01:19.440
Please, if you're running on Windows,

00:01:19.470 --> 00:01:23.000
again, quit all your command props,
quit all your Metro bundlers,

00:01:23.030 --> 00:01:26.290
and let's just get started
with installing these items.

00:01:26.320 --> 00:01:27.760
First, we're going to need to install

00:01:27.790 --> 00:01:31.660
this, so just copy it and place it
right here and wait for it to complete.

00:01:31.690 --> 00:01:35.740
Again, we're not using Expo,
so we're not going to use this command.

00:01:35.770 --> 00:01:39.180
We're going to use
the Bear React native project.

00:01:39.210 --> 00:01:41.400
Let's just copy this line right here

00:01:41.430 --> 00:01:46.780
and install the gesture handler and let's
wait for this to complete as well.

00:01:46.810 --> 00:01:49.120
Here it says that if we want to complete

00:01:49.150 --> 00:01:52.660
the installation of the React native
gesture handler,

00:01:52.690 --> 00:01:56.400
we're going to have to add this
line at the top of our application.

00:01:56.400 --> 00:01:59.277
It's either going to be an index.js
or app.js file

00:01:59.477 --> 00:02:02.100
let's just go to index.js file, actually,

00:02:02.130 --> 00:02:07.140
and let's make sure that we import it as
a first thing right here and save it.

00:02:07.170 --> 00:02:09.400
Then we don't need the expo installation

00:02:09.430 --> 00:02:12.660
here anymore and we are going
to use the masked view.

00:02:12.690 --> 00:02:14.940
Let's just copy this as well.

00:02:14.970 --> 00:02:18.380
Open up our terminal, paste it,
and wait for it to complete.

00:02:18.410 --> 00:02:22.220
If you're on macOS, again,
you're going to have to install the pods.

00:02:22.250 --> 00:02:24.260
Windows users don't ever do it.

00:02:24.290 --> 00:02:29.730
Just install the pods if you're
on macOS and wait for this to complete.

00:02:29.760 --> 00:02:30.560
That's all.

00:02:30.560 --> 00:02:34.080
In the next video, we're actually going
to start to use the Stack Navigator.

00:02:34.110 --> 00:02:36.480
We are not going to set
it up in this video.

00:02:36.480 --> 00:02:39.880
So if you're interested on how to create
Stack Navigators and how to use

00:02:39.910 --> 00:02:43.020
the navigation system,
please come back to the next video.

00:02:43.040 --> 00:02:45.280
Thank you so much for watching
and I'll see you there.