1
00:00:01,150 --> 00:00:04,300
We've now got our authentication flow in a very good location.

2
00:00:04,360 --> 00:00:09,370
So now it's time for us to start thinking about the track list detail and create screens.

3
00:00:09,370 --> 00:00:13,350
I think it makes a lot of sense to first make sure we have the ability to create a new track.

4
00:00:13,400 --> 00:00:17,110
Remember the entire purpose of this application is to show a map to the user.

5
00:00:17,110 --> 00:00:20,670
Once they press that record button we're going to record their path throughout the world.

6
00:00:21,010 --> 00:00:25,600
And as they start to walk around we're going to draw a black line on the map to track the path that

7
00:00:25,600 --> 00:00:26,740
they make.

8
00:00:26,740 --> 00:00:29,560
So let's focus first on this create screen.

9
00:00:29,560 --> 00:00:33,490
Now the create screen is actually going to end up having a lot of different logic inside of it.

10
00:00:33,490 --> 00:00:35,610
Way more than you would ever expect.

11
00:00:35,650 --> 00:00:40,300
So from the get go we're going to break that track create screen into a couple of different separate

12
00:00:40,300 --> 00:00:41,500
components.

13
00:00:41,530 --> 00:00:43,440
First we're going to add the create screen itself.

14
00:00:43,450 --> 00:00:46,030
That's going to be a single component.

15
00:00:46,030 --> 00:00:49,940
We're also going to create a component just dedicated to showing the map right here.

16
00:00:50,020 --> 00:00:55,870
And that black line across it will create that component inside of a component called Map.

17
00:00:55,960 --> 00:00:58,360
And then finally all this form stuff down here.

18
00:00:58,360 --> 00:01:04,820
So a text input and a record button we will display inside of a another component called Track form.

19
00:01:04,820 --> 00:01:09,400
Now it might be a little bit kind of unclear as to why this component is going to end up being rather

20
00:01:09,400 --> 00:01:13,600
complicated and why we would want to break it up in two separate subcomponents right from the get go

21
00:01:14,020 --> 00:01:18,850
but as soon as we start to discuss how we track a user's location in general to react native you're

22
00:01:18,850 --> 00:01:21,910
going to understand that well there's kind of a lot that goes into it.

23
00:01:22,090 --> 00:01:26,140
And so breaking this up into separate components right now is going to save us a lot of headache down

24
00:01:26,140 --> 00:01:27,520
the line.

25
00:01:27,520 --> 00:01:27,730
All right.

26
00:01:27,760 --> 00:01:33,040
So to get started let's create a new component file called simply map for right now we'll just put a

27
00:01:33,040 --> 00:01:34,460
little bit of boilerplate in there.

28
00:01:34,570 --> 00:01:39,430
But once we get that wired up to our track great screen will then start to focus on showing an actual

29
00:01:39,430 --> 00:01:41,680
map inside of it.

30
00:01:41,890 --> 00:01:42,160
All right.

31
00:01:42,160 --> 00:01:43,180
So back inside my code.

32
00:01:43,180 --> 00:01:48,400
Ed I'll find the components directory and make a new file inside there called Map dot J.S..

33
00:01:48,490 --> 00:01:52,580
So like I said just a little bit of boilerplate for right now.

34
00:01:52,580 --> 00:01:55,620
So I'm going to import react.

35
00:01:55,850 --> 00:02:07,780
I'm going to get text and style sheet from React Native or then make my map component so inside of here

36
00:02:08,080 --> 00:02:19,250
just some text right now and I'll say something like I am a map will then create our sales object.

37
00:02:19,460 --> 00:02:23,600
We are going to eventually use this to apply some styling to the map you and I are going to create.

38
00:02:23,600 --> 00:02:29,260
So this is not going to be an unused line of code right here even though it very frequently is for us.

39
00:02:29,300 --> 00:02:36,140
And finally we will export default map at the bottom so let's now import this into our track create

40
00:02:36,140 --> 00:02:37,250
screen.

41
00:02:37,250 --> 00:02:42,160
It's all fine inside my screens directory track it creates screen inside of here.

42
00:02:42,180 --> 00:02:51,490
I will import map from components map and then right now inside of here we're still using the text element

43
00:02:51,490 --> 00:02:52,950
coming from React Native.

44
00:02:53,230 --> 00:02:58,120
Let's update that to use the text element from React Native elements so we can add on that simple like

45
00:02:58,180 --> 00:03:03,880
each one two or three for a prop as opposed to applying a style like we currently are.

46
00:03:03,880 --> 00:03:09,190
In addition we probably want to make sure that the track create screen doesn't spin off the edge of

47
00:03:09,190 --> 00:03:11,110
the actual device here.

48
00:03:11,110 --> 00:03:17,050
So we should probably also wrap all the stuff inside of a safe view that's coming from react navigation

49
00:03:17,080 --> 00:03:19,960
which we saw just a moment ago OK.

50
00:03:19,990 --> 00:03:25,930
So inside of a track create screen I'm going to remove the import from React Native for text right there.

51
00:03:25,930 --> 00:03:29,550
I'm also going to clean up view because I don't think we're going to need that anytime soon.

52
00:03:30,440 --> 00:03:36,100
I'll then get a import for text from react native elements.

53
00:03:37,510 --> 00:03:41,090
And now we can do a little bit of update to our render method inside of here.

54
00:03:41,090 --> 00:03:44,890
I'm gonna delete the entire existing text element.

55
00:03:45,100 --> 00:03:48,780
I'm going to instead return one more import my mistake.

56
00:03:48,790 --> 00:03:54,040
At the very top let's make sure we also get safe The View safe area view.

57
00:03:54,040 --> 00:03:57,710
There we go from react navigation.

58
00:03:57,790 --> 00:03:59,070
So now we can get started.

59
00:03:59,070 --> 00:04:07,870
So I gonna do a multi line J.S. x return we'll do a safe area view and we'll throw on force inset is

60
00:04:07,990 --> 00:04:11,180
top always

61
00:04:15,480 --> 00:04:25,330
then we'll place our text I'm going to display it as like a h three and we'll say create a track and

62
00:04:25,330 --> 00:04:29,820
then finally we can show our map okay.

63
00:04:29,820 --> 00:04:30,700
Let's give this a try.

64
00:04:30,800 --> 00:04:31,860
I'll save the file.

65
00:04:31,920 --> 00:04:34,970
Let's flip back over I'll hit track create.

66
00:04:34,980 --> 00:04:36,830
And that's definitely a good start.

67
00:04:36,840 --> 00:04:40,650
Now create a track is a little bit small compared to the original mockup so if you wanted to maybe we

68
00:04:40,650 --> 00:04:44,310
could change that to like an H2 instead.

69
00:04:44,390 --> 00:04:44,810
There we go.

70
00:04:44,810 --> 00:04:49,180
It's a little bit better a little bit closer to the mockup so I'll try this out on Android as well.

71
00:04:49,280 --> 00:04:51,800
Just make sure I've got everything displaying yep looks good.

72
00:04:52,740 --> 00:04:53,060
All right.

73
00:04:53,060 --> 00:04:55,250
So now we've got some scaffolding put inside of here.

74
00:04:55,250 --> 00:04:56,290
Let's take a quick pause.

75
00:04:56,300 --> 00:05:00,500
When we come back the next video we're gonna start to take a look at how we show an actual map on the

76
00:05:00,500 --> 00:05:02,390
screen that a user can interact with.