WEBVTT

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

2
00:00:01.480 --> 00:00:02.980
In this video, we'll be taking the first

3
00:00:03.010 --> 00:00:06.140
steps towards building our
donation mobile application.

4
00:00:06.170 --> 00:00:08.330
And we'll start by installing the initial

5
00:00:08.360 --> 00:00:11.300
project and cleaning up some
of the things in the main file.

6
00:00:11.320 --> 00:00:12.420
And by the end of this video,

7
00:00:12.450 --> 00:00:17.460
you're going to have a project set up
that will be ready for our next videos so

8
00:00:17.490 --> 00:00:20.620
that we can implement
our own custom features.

9
00:00:20.650 --> 00:00:22.060
So let's get started.

10
00:00:22.080 --> 00:00:25.820
First of all, we need to open a terminal.

11
00:00:25.850 --> 00:00:27.700
Let's navigate to the desktop.

12
00:00:27.730 --> 00:00:29.660
That's where I want my files to be.

13
00:00:29.690 --> 00:00:32.603
And I'm just going to type

14
00:00:32.803 --> 00:00:36.300
npx react-native init DonationApp

15
00:00:36.320 --> 00:00:37.580
I'll let this run.

16
00:00:37.610 --> 00:00:39.020
It's going to take some time

17
00:00:39.050 --> 00:00:43.380
for a complete download of the template
and installation of pods.

18
00:00:43.410 --> 00:00:45.780
So please feel free to come back to this

19
00:00:45.810 --> 00:00:48.900
video once your installation
has been complete.

20
00:00:48.920 --> 00:00:49.420
Great.

21
00:00:49.450 --> 00:00:54.780
Now that our installation is complete,
we can just copy this instruction to let

22
00:00:54.810 --> 00:01:03.460
it run on the iOS simulator
and we can just navigate to our editor.

23
00:01:03.490 --> 00:01:04.930
I use webstorm.

24
00:01:04.960 --> 00:01:09.100
You can open it up in any
editor that you'd like.

25
00:01:09.130 --> 00:01:11.570
And I'm just going to navigate to desktop

26
00:01:11.600 --> 00:01:14.900
and I'm going to select Donation App
and I'm just going to open it up.

27
00:01:14.920 --> 00:01:16.900
Great.
Now my Metro bundler is running.

28
00:01:16.930 --> 00:01:21.410
And here's our donation app
appearing in our simulator.

29
00:01:21.440 --> 00:01:23.460
I'm going to let the Metro bundler run so

30
00:01:23.490 --> 00:01:26.260
that we can see the changes
that we're about to make.

31
00:01:26.290 --> 00:01:29.210
And I'm just going to go to app file

32
00:01:29.240 --> 00:01:31.700
and I'm going to delete
everything that we don't need.

33
00:01:31.730 --> 00:01:33.900
So I'm just going to delete that comment.

34
00:01:33.930 --> 00:01:39.060
I'm going to leave the safe area view
only from native going to delete this.

35
00:01:39.090 --> 00:01:41.700
And we don't need this component here,

36
00:01:41.730 --> 00:01:47.380
neither do we need this part
or these imports.

37
00:01:47.410 --> 00:01:51.210
And I'm just going to rewrite how app is

38
00:01:51.240 --> 00:01:55.760
made here because we're not
going to be using TypeScript.

39
00:01:56.040 --> 00:01:58.180
I'm going to do this instead.

40
00:01:58.210 --> 00:02:03.460
We don't need these or these styles here.

41
00:02:03.480 --> 00:02:05.260
And the only thing that I'm going to leave

42
00:02:05.290 --> 00:02:08.700
from the components here
is the safe area view.

43
00:02:08.730 --> 00:02:11.100
I'm going to delete these styles as well.

44
00:02:11.130 --> 00:02:13.170
I'm going to save this.

45
00:02:13.200 --> 00:02:15.020
And now I see the blank screen.

46
00:02:15.050 --> 00:02:20.220
So we're ready for the next videos now
to start the setup of our project.

47
00:02:20.240 --> 00:02:22.920
Thanks so much for watching
and see you in the next video.