All right my friends in this video we're going to tackle just a couple of odds and ends.
So first off on our checklist screen I said in the last video that maybe we don't need the header here
but now that I'm thinking about it maybe rather than showing this big kind of ugly text element maybe
we should instead just show like track list inside the header so to show some text inside the header.
We'll find our track list screen file.
Here it is right here.
And then we'll take tracklist screen right underneath the component we'll say Track List screen dot
navigation options.
Remember when we specify navigation options we can either assign this an object directly or return it
inside of a function like so in general we use the function any time we want to customize the object
we want return using information out the props object so I'm just going to return an object cause I
don't really need to do any customization so I'm gonna say title is simply tracks like so.
One other quick thing.
Notice that I did a very small type of there it should be.
Track list screen like so.
That's better.
Gates let's save that.
All right.
That looks a little bit better.
Well let's now take off that text element so inside of here I'll find the text element delete it.
And that looks pretty darn good.
OK.
So good start.
Next up let's try to customize the text shown inside of this bottom tab bar.
Right now it's got just the kind of ugly terms for every different tab.
And we also don't really have any icons inside there either so to fix that stuff up we can go back over
to our app dot J.S. file.
So inside of app dot J.S. we will find where we create the bottom tab bar.
So for each of these different things that we create the create stack navigator the track create screen
and the account screen we can add on some navigation properties to each one.
And that's going to customize how each of these are displayed inside that bottom tab bar.
So in other words we need to go to our track rate screen.
We need to go to our account screen and we need to somehow on this thing as well assign some navigation
options.
So I'll first begin by going to track create screen.
Here it is right here underneath my component I'll once again to track create screen dot navigation
options and inside of here we can specify some different options to customize that bottom tab bar.
So in particular we probably want to fix up the text that it has.
So rather than saying something like simply track create we could probably give it something a bit more
creative like a title of ADD track so if I assign that like so now we'll see add track there instead
we probably also want to show an icon as well to show an icon we can assign inside of here a tab bar
icon property and we'll assign this to this some JSA X element or some react element.
So as usual we can probably pick out some kind of icon from that vector icons directory that we want
to show to represent this particular tab so going to flip back over my browser remember we can go to
get hub dot com Expo slash vector dash icons we can then go to the directory right here and then find
some appropriate kind of icon in this case we're talking about like adding something or creating something.
So I think we should like a plus icon that might be appropriate.
So when I search for a plus on this list right here let's say font.
Awesome.
Has this really nice very bold plus icon that I think would probably be appropriate for what we're trying
to do so back inside of track create screen at the very top.
I will add in an import for font awesome from at Expo vector icons and I'll then place that down here
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
going to estimate here of around 20 or so.
OK.
Let's save that and see how we're doing.
Yeah I'd say that's pretty reasonable.
Now we can repeat the same process for the account screen as well.
So I'm going to go over to my account screen.
I'm going to find an icon right away so we probably want some light kind of gear or like settings icon.
I'll try searching for settings I'd say some of these kind of work out maybe like gear.
Well looks like fun.
Awesome has another matching one right here so I'll try showing that one from fun awesome on my account
setting screen so inside of account screen I will import font awesome from Expo vector icons once again.
Underneath account screen we can define account screen dot navigation options once again we'll give
a song a title of like account and we can also assign the tab bar icon which will be font awesome as
we just discussed we can use the gear name
and then I'll once again to a size of 20 or so.
All right so let's save this.
And yep I'd say that's pretty reasonable.
And finally we need to assign or do something very similar for the track list flow over here.
Now unfortunately a checklist flow is just a little bit different.
So back inside of APT.
J.S. remember the bottom tab bar right here that navigator is going to decide how to show everyone of
his bottom elements by look at the navigation property or the navigation options property on these different
components.
But in this case we are not assigning a component to tracklist flow.
Instead we are assigning create stack navigator so in order to set some navigation options on this thing.
Well unfortunately it looks a little bit ugly but it's what we got to do.
So I'm going to extract create tab navigator and take that entire call right there I'm going to cut
it pasted above my switch navigator and assign it to a variable that I'll call like about track list
flow and now back down here where we just cut it from we will assign track list flow which of course
we can condense down to just track list flow by itself.
And now to set some navigation options we'll place them directly on that variable so we'll say track
list flow dot navigation options so on this thing we can assign a title of like tracks and we can do
a tab bar icon here as well.
Let's go pull out an icon very quickly.
So on that kind of list screen we're showing a list of elements of sorts.
So if I search for list right here you'll see that once again from fun awesome we've got t h dash list.
I'd say that looks somewhat reasonable so back inside of APT.
J.S. at the top.
One more important side of here we'll get font awesome from Expo vector icons.
And then on tab our icon will set font awesome with the name of T H list in a size of 20.
All right.
Let's save that again as well.
And there we go.
And that's pretty much it.
All right.
Well I'd say that our account or me her application is pretty much feature complete.
I'm gonna check out Android here really quickly as well.
It looks like this is working out perfectly as well.
So I think this looks overall pretty darn good.
Now there is some light kind of very obvious deficiency here and the obvious defense deficiency I would
say is that inside of our SRT directory remember we've got that mock location.
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
maybe not.
Remember we are importing that thing into our track create screen right there.
So maybe you could try commenting that out saving this you could run on your physical device hit record
and then maybe walk around the block or something like that and just make sure that you can get a very
real list of points otherwise if you want to be kind of lazy I'm definitely lazy here I'll just stick
with the kind of test data for right now.
All right.
So that's essentially a feature complete application.
So as usual let's take a quick pause right here and continue in just a moment.