1
00:00:01,120 --> 00:00:06,190
Towards the end of the last video I added in a console log to the location context file.

2
00:00:06,190 --> 00:00:09,670
I'm just gonna point out that I'm gonna remove that console log right there just to make sure that I

3
00:00:09,670 --> 00:00:12,690
don't have a bunch of console logs all over the place.

4
00:00:12,820 --> 00:00:13,080
Okay.

5
00:00:13,120 --> 00:00:16,960
Now that our map is looking pretty good we're gonna start to work on our track form.

6
00:00:17,090 --> 00:00:20,410
So remember track form is going to allow a user to enter any name for the track.

7
00:00:20,440 --> 00:00:26,830
So like my hike my bike ride whatever else and then it will display a record button whenever a user

8
00:00:26,830 --> 00:00:27,810
taps on that button.

9
00:00:27,820 --> 00:00:32,740
We are starting the recording process so we're going to want to record all the different locations that

10
00:00:32,740 --> 00:00:35,380
get emitted by Expo location.

11
00:00:35,380 --> 00:00:39,490
In addition whenever user taps on record right there we should probably turn that button into something

12
00:00:39,490 --> 00:00:43,320
it says like stop recording or something like that.

13
00:00:43,330 --> 00:00:45,340
You know that definitely makes a lot of sense.

14
00:00:46,230 --> 00:00:51,510
So to get started let's create a new component called Track form and it really has to do is show a text

15
00:00:51,510 --> 00:00:54,640
input and a button all right.

16
00:00:54,650 --> 00:01:02,660
So going to flip back over inside of my component directory I'll make a new file called Track form and

17
00:01:02,660 --> 00:01:03,590
then inside of here.

18
00:01:03,620 --> 00:01:10,190
Well we're just gonna do some typical boilerplate so at the very top I'm going to import react from

19
00:01:10,190 --> 00:01:11,360
react.

20
00:01:11,540 --> 00:01:27,370
I'm going to get input and button rom react native elements then create my component.

21
00:01:27,620 --> 00:01:29,160
I'm not going to create a style sheet here.

22
00:01:29,180 --> 00:01:32,380
I know that we've created style sheets like a billion times and not used them.

23
00:01:32,370 --> 00:01:36,230
So let's just skip it this time because I don't think we're going to really need to apply any custom

24
00:01:36,230 --> 00:01:42,360
styling and I'll do a export default track form okay.

25
00:01:42,390 --> 00:01:48,950
So inside of my component I'm going to make sure that I return a fragment and inside that fragment I'm

26
00:01:48,950 --> 00:01:56,830
gonna show a text input and I want to also show a button and right now I'll get the button.

27
00:01:56,830 --> 00:02:00,480
A title of something like START RECORDING

28
00:02:03,290 --> 00:02:04,760
All right that looks like a reasonable start.

29
00:02:04,800 --> 00:02:11,960
Let's save this and go back over to a track create screen so the top of track create screen will add

30
00:02:11,960 --> 00:02:18,800
in and import or track form from up one directory.

31
00:02:18,800 --> 00:02:27,940
Components track form and then we can show track form right underneath that error message get set looks

32
00:02:27,940 --> 00:02:31,400
good so I'll save this.

33
00:02:31,400 --> 00:02:35,900
Let's flip back over go back to track create and yeah looks reasonable.

34
00:02:35,900 --> 00:02:37,950
Now once again we've got a text input here.

35
00:02:37,970 --> 00:02:39,400
Without a doubt it really is there.

36
00:02:39,470 --> 00:02:43,400
But the underlined for it or kind of like the bottom bar is right up against the button.

37
00:02:43,400 --> 00:02:48,340
So it's really hard to see nonetheless if I tap in there I definitely do have a text input.

38
00:02:48,390 --> 00:02:52,100
Let's add a little bit of spacing around the text input just to make sure that it's easier for the user

39
00:02:52,100 --> 00:02:53,730
to see what's going on.

40
00:02:53,900 --> 00:02:58,670
So to add a little bit of spacing inside of track form rather than defining a style sheet we can reuse

41
00:02:58,670 --> 00:03:01,520
that space or component to be created a little bit ago.

42
00:03:01,810 --> 00:03:08,650
So all import spacer from spacer and then wrap my input with it.

43
00:03:08,710 --> 00:03:14,450
Remember the spacer component just adds in some margin on all sides of some child element.

44
00:03:15,030 --> 00:03:20,010
So we can test this and yet I'd say Alex can reasonable we could probably do the same thing for Button

45
00:03:20,010 --> 00:03:25,680
as well and I'll skip it if you want to put some spacer around the button certainly feel free to do

46
00:03:25,680 --> 00:03:29,560
so nonetheless little kind of I don't know.

47
00:03:29,560 --> 00:03:33,340
Nice to have thing I'm going to throw inside of here on the input element I'll put in a place holder

48
00:03:33,370 --> 00:03:39,130
of something like enter name because remember this is going to the name of the track that is being created

49
00:03:40,400 --> 00:03:43,840
all right so looks very reasonable so I think that we've got some good scaffolding here.

50
00:03:43,870 --> 00:03:48,160
Let's take a quick pause we come back the next video we'll start implementing the rest of track form.