1
00:00:00,950 --> 00:00:04,590
All right my friends in this video we're going to tackle just a couple of odds and ends.

2
00:00:04,970 --> 00:00:09,260
So first off on our checklist screen I said in the last video that maybe we don't need the header here

3
00:00:09,470 --> 00:00:13,790
but now that I'm thinking about it maybe rather than showing this big kind of ugly text element maybe

4
00:00:13,790 --> 00:00:19,260
we should instead just show like track list inside the header so to show some text inside the header.

5
00:00:19,340 --> 00:00:21,370
We'll find our track list screen file.

6
00:00:21,380 --> 00:00:22,690
Here it is right here.

7
00:00:23,090 --> 00:00:29,570
And then we'll take tracklist screen right underneath the component we'll say Track List screen dot

8
00:00:29,660 --> 00:00:33,030
navigation options.

9
00:00:33,070 --> 00:00:38,800
Remember when we specify navigation options we can either assign this an object directly or return it

10
00:00:39,430 --> 00:00:46,360
inside of a function like so in general we use the function any time we want to customize the object

11
00:00:46,390 --> 00:00:53,280
we want return using information out the props object so I'm just going to return an object cause I

12
00:00:53,280 --> 00:01:00,350
don't really need to do any customization so I'm gonna say title is simply tracks like so.

13
00:01:00,350 --> 00:01:01,100
One other quick thing.

14
00:01:01,100 --> 00:01:03,530
Notice that I did a very small type of there it should be.

15
00:01:03,560 --> 00:01:05,570
Track list screen like so.

16
00:01:05,570 --> 00:01:06,310
That's better.

17
00:01:07,000 --> 00:01:09,360
Gates let's save that.

18
00:01:09,430 --> 00:01:09,670
All right.

19
00:01:09,670 --> 00:01:10,570
That looks a little bit better.

20
00:01:10,570 --> 00:01:18,240
Well let's now take off that text element so inside of here I'll find the text element delete it.

21
00:01:19,660 --> 00:01:21,780
And that looks pretty darn good.

22
00:01:21,790 --> 00:01:22,030
OK.

23
00:01:22,060 --> 00:01:23,470
So good start.

24
00:01:23,470 --> 00:01:27,820
Next up let's try to customize the text shown inside of this bottom tab bar.

25
00:01:27,850 --> 00:01:31,440
Right now it's got just the kind of ugly terms for every different tab.

26
00:01:31,450 --> 00:01:37,000
And we also don't really have any icons inside there either so to fix that stuff up we can go back over

27
00:01:37,060 --> 00:01:39,480
to our app dot J.S. file.

28
00:01:39,730 --> 00:01:45,650
So inside of app dot J.S. we will find where we create the bottom tab bar.

29
00:01:45,810 --> 00:01:50,790
So for each of these different things that we create the create stack navigator the track create screen

30
00:01:50,820 --> 00:01:55,300
and the account screen we can add on some navigation properties to each one.

31
00:01:55,470 --> 00:02:00,330
And that's going to customize how each of these are displayed inside that bottom tab bar.

32
00:02:00,360 --> 00:02:03,300
So in other words we need to go to our track rate screen.

33
00:02:03,300 --> 00:02:08,430
We need to go to our account screen and we need to somehow on this thing as well assign some navigation

34
00:02:08,460 --> 00:02:09,550
options.

35
00:02:09,750 --> 00:02:13,340
So I'll first begin by going to track create screen.

36
00:02:13,450 --> 00:02:24,980
Here it is right here underneath my component I'll once again to track create screen dot navigation

37
00:02:25,040 --> 00:02:32,980
options and inside of here we can specify some different options to customize that bottom tab bar.

38
00:02:32,980 --> 00:02:36,470
So in particular we probably want to fix up the text that it has.

39
00:02:36,610 --> 00:02:41,260
So rather than saying something like simply track create we could probably give it something a bit more

40
00:02:41,260 --> 00:02:49,890
creative like a title of ADD track so if I assign that like so now we'll see add track there instead

41
00:02:51,750 --> 00:02:59,130
we probably also want to show an icon as well to show an icon we can assign inside of here a tab bar

42
00:02:59,430 --> 00:03:05,480
icon property and we'll assign this to this some JSA X element or some react element.

43
00:03:05,480 --> 00:03:11,570
So as usual we can probably pick out some kind of icon from that vector icons directory that we want

44
00:03:11,570 --> 00:03:18,600
to show to represent this particular tab so going to flip back over my browser remember we can go to

45
00:03:18,650 --> 00:03:27,410
get hub dot com Expo slash vector dash icons we can then go to the directory right here and then find

46
00:03:27,410 --> 00:03:33,030
some appropriate kind of icon in this case we're talking about like adding something or creating something.

47
00:03:33,050 --> 00:03:37,460
So I think we should like a plus icon that might be appropriate.

48
00:03:37,520 --> 00:03:41,630
So when I search for a plus on this list right here let's say font.

49
00:03:41,650 --> 00:03:42,140
Awesome.

50
00:03:42,140 --> 00:03:47,000
Has this really nice very bold plus icon that I think would probably be appropriate for what we're trying

51
00:03:47,000 --> 00:03:52,520
to do so back inside of track create screen at the very top.

52
00:03:53,360 --> 00:04:06,980
I will add in an import for font awesome from at Expo vector icons and I'll then place that down here

53
00:04:06,980 --> 00:04:12,960
at tab bar icon so font awesome the name that we want to show is plus and I'll give it a size I'm just

54
00:04:12,960 --> 00:04:16,400
going to estimate here of around 20 or so.

55
00:04:16,420 --> 00:04:16,660
OK.

56
00:04:16,690 --> 00:04:19,120
Let's save that and see how we're doing.

57
00:04:19,310 --> 00:04:22,570
Yeah I'd say that's pretty reasonable.

58
00:04:22,620 --> 00:04:26,100
Now we can repeat the same process for the account screen as well.

59
00:04:26,400 --> 00:04:29,370
So I'm going to go over to my account screen.

60
00:04:29,510 --> 00:04:35,620
I'm going to find an icon right away so we probably want some light kind of gear or like settings icon.

61
00:04:35,620 --> 00:04:43,180
I'll try searching for settings I'd say some of these kind of work out maybe like gear.

62
00:04:43,380 --> 00:04:44,090
Well looks like fun.

63
00:04:44,120 --> 00:04:48,350
Awesome has another matching one right here so I'll try showing that one from fun awesome on my account

64
00:04:48,350 --> 00:04:57,700
setting screen so inside of account screen I will import font awesome from Expo vector icons once again.

65
00:04:59,460 --> 00:05:08,580
Underneath account screen we can define account screen dot navigation options once again we'll give

66
00:05:08,580 --> 00:05:21,390
a song a title of like account and we can also assign the tab bar icon which will be font awesome as

67
00:05:21,390 --> 00:05:23,430
we just discussed we can use the gear name

68
00:05:26,480 --> 00:05:28,520
and then I'll once again to a size of 20 or so.

69
00:05:30,400 --> 00:05:31,960
All right so let's save this.

70
00:05:32,260 --> 00:05:33,900
And yep I'd say that's pretty reasonable.

71
00:05:34,960 --> 00:05:40,640
And finally we need to assign or do something very similar for the track list flow over here.

72
00:05:40,730 --> 00:05:43,990
Now unfortunately a checklist flow is just a little bit different.

73
00:05:44,000 --> 00:05:45,080
So back inside of APT.

74
00:05:45,080 --> 00:05:50,770
J.S. remember the bottom tab bar right here that navigator is going to decide how to show everyone of

75
00:05:50,770 --> 00:05:55,760
his bottom elements by look at the navigation property or the navigation options property on these different

76
00:05:55,760 --> 00:05:56,960
components.

77
00:05:56,960 --> 00:06:00,450
But in this case we are not assigning a component to tracklist flow.

78
00:06:00,470 --> 00:06:06,900
Instead we are assigning create stack navigator so in order to set some navigation options on this thing.

79
00:06:06,980 --> 00:06:10,730
Well unfortunately it looks a little bit ugly but it's what we got to do.

80
00:06:11,910 --> 00:06:18,000
So I'm going to extract create tab navigator and take that entire call right there I'm going to cut

81
00:06:18,000 --> 00:06:26,910
it pasted above my switch navigator and assign it to a variable that I'll call like about track list

82
00:06:27,000 --> 00:06:34,900
flow and now back down here where we just cut it from we will assign track list flow which of course

83
00:06:34,900 --> 00:06:38,230
we can condense down to just track list flow by itself.

84
00:06:38,380 --> 00:06:43,840
And now to set some navigation options we'll place them directly on that variable so we'll say track

85
00:06:43,930 --> 00:06:54,800
list flow dot navigation options so on this thing we can assign a title of like tracks and we can do

86
00:06:54,830 --> 00:06:58,130
a tab bar icon here as well.

87
00:06:59,240 --> 00:07:01,270
Let's go pull out an icon very quickly.

88
00:07:01,310 --> 00:07:05,720
So on that kind of list screen we're showing a list of elements of sorts.

89
00:07:05,720 --> 00:07:11,260
So if I search for list right here you'll see that once again from fun awesome we've got t h dash list.

90
00:07:11,540 --> 00:07:15,290
I'd say that looks somewhat reasonable so back inside of APT.

91
00:07:15,290 --> 00:07:16,420
J.S. at the top.

92
00:07:16,460 --> 00:07:25,630
One more important side of here we'll get font awesome from Expo vector icons.

93
00:07:27,790 --> 00:07:38,930
And then on tab our icon will set font awesome with the name of T H list in a size of 20.

94
00:07:39,060 --> 00:07:39,370
All right.

95
00:07:39,400 --> 00:07:41,270
Let's save that again as well.

96
00:07:41,290 --> 00:07:42,870
And there we go.

97
00:07:43,000 --> 00:07:44,930
And that's pretty much it.

98
00:07:44,960 --> 00:07:45,260
All right.

99
00:07:45,290 --> 00:07:49,570
Well I'd say that our account or me her application is pretty much feature complete.

100
00:07:49,580 --> 00:07:52,100
I'm gonna check out Android here really quickly as well.

101
00:07:52,180 --> 00:07:55,040
It looks like this is working out perfectly as well.

102
00:07:55,220 --> 00:07:57,860
So I think this looks overall pretty darn good.

103
00:07:57,860 --> 00:08:03,260
Now there is some light kind of very obvious deficiency here and the obvious defense deficiency I would

104
00:08:03,260 --> 00:08:09,020
say is that inside of our SRT directory remember we've got that mock location.

105
00:08:09,020 --> 00:08:13,370
So at this point in time if you want to have kind of a I don't know maybe you would call us a good time

106
00:08:13,370 --> 00:08:14,450
maybe not.

107
00:08:14,450 --> 00:08:19,050
Remember we are importing that thing into our track create screen right there.

108
00:08:19,190 --> 00:08:25,520
So maybe you could try commenting that out saving this you could run on your physical device hit record

109
00:08:25,610 --> 00:08:29,840
and then maybe walk around the block or something like that and just make sure that you can get a very

110
00:08:29,930 --> 00:08:36,440
real list of points otherwise if you want to be kind of lazy I'm definitely lazy here I'll just stick

111
00:08:36,440 --> 00:08:39,300
with the kind of test data for right now.

112
00:08:39,320 --> 00:08:39,560
All right.

113
00:08:39,590 --> 00:08:42,530
So that's essentially a feature complete application.

114
00:08:42,530 --> 00:08:46,430
So as usual let's take a quick pause right here and continue in just a moment.