Modal & Bottom Tab Navigation

[00:00:00]
>> Kadi Kraman: Next up, let's look at Modal Navigations. So rendering a screen as a modal means rendering it on top of other content. So important thing to note that in order for this to work, the modal needs to be defined above or adjacent to the screens it's being rendered on top of.

[00:00:20]
So, in particular, if you have a bottom tabs navigator and you have a stack inside your bottom tabs and you make one of those screens modal. It won't get rendered on top of your app, you need to define it at the top level. So, in our case, our structure is quite flat.

[00:00:40]
So,
>> Kadi Kraman: We can change any of these screens to be rendered modally by using the options. So I've actually not even defined the screens here. And actually, this is, again, a good example. So this is something that throws off people initially because especially when you're coming from React navigation, you think that you need to define the screens for them to exist.

[00:01:09]
But because we are using power system based routing, you'll see that all this navigation works even though these screens aren't even defined. So the only reason we really define them is to add additional properties here. So let me copy these so I could do our counter and our idea.

[00:01:30]
So counter idea and this will change this heading that is rendered and let's pass in presentation modal. So, whoever asked earlier about how to do your own customer alerts, then this is how you do them. So you can render a screen as a transparent modal, and then the content of the model will be the alert.

[00:02:07]
So let's do modal and now if I go to counter you'll actually see that it gets rendered on top. And if I do another presentation modal here as well,
>> Kadi Kraman: Then, there you go, you get the modals all the way down. And the interesting thing about this is that on Android, again, this actually looks different.

[00:02:30]
So, this is rendering a modal, but it looks similar to the screen. So this, again, is not a bug, it's just the Android appropriate navigation. You can change how these screens are presented by using the animation. So there's a couple, you can configure your own animations, you can build your own, this is supported, but there's a couple here.

[00:03:00]
That's our built in, so for example, I could use a fade animation. So if I go to counter, this will render as a modal, but then it will fade in the other screen. So let's try a different one slide from bottom, let's do that one, I guess. So now we get slide from bottom here and then on Android.

[00:03:20]
You actually get this to slide from bottom as well. So if you do want it to slide from bottom on the Android, this is how you do it. And then finally, we have our bottom tabs navigation. So this is something you see in almost every mobile app. So bottom tabs, which may have many many screens inside.

[00:03:42]
So in the days of not having extra router and doing this sort React navigation, this would've actually been really tedious. And it's the reason that I didn't include bottom nabs in my last intro to the React Native workshop because it would've taken ages to do and be quite complicated.

[00:04:03]
But we are using expo-router, so I'm getting rid of my presentation modals here. So all we need to do to convert this stack navigator into a bottom tabs navigator, is you're gonna select all these stacks change them to tabs.
>> Kadi Kraman: There you go. And it's amazing, you can now navigate between them, you have some bottom tabs.

[00:04:32]
And things to note is that, the previous navigation methods that we added, so the navigation using a link, this. This still works, and the user-routine, like programmatic navigation, this still works. So you can navigate between the screens the same way. Obviously, there is no animation here because we're using button tabs.

[00:04:55]
All right, but we can actually remove these navigation buttons because we have our bottom tabs now.
>> Kadi Kraman: .And remove it from the index screen as well.
>> Kadi Kraman: Lovely and what would the bottom tabs be without some beautiful bottom tabs icons. So by default you're getting this triangle that tells you I don't have an icon, so we can choose one.

[00:05:29]
And thankfully we can use our expo SVG icon library, or we can render anything there. It's just a react component, but we're going to use some icons from the SVG library. So, did I list which icons I chose? I did not but if we go to @expo/vector-icons, I think I searched for list.

[00:05:54]
>> Kadi Kraman: I think this was it, all right, so we have our list icon. You can choose a different icon and let's go to our layout file and import it. And we can pass in the bottom tabs icons from our options object. So let's copy this. And the prop with the key that we're looking for, sorry, is a bottom tabBarIcon and this is a function that returns a React component.

[00:06:34]
So you can pass in anything here, you can pass in an image or a text or your own component but let's just pass in,
>> Kadi Kraman: This icon, lovely. Okay, so one thing you notice that when I navigate to these other tabs, then the icon just changes color to blue.

[00:07:02]
But when I navigate to the icon that I've just added, then the text changes color, but the icon doesn't. And we can actually use the color from this tab or icon function. So if I hover over it, it tells you the props that it passes in. So it tells me whether it's focused, the color that it should currently be and then also the size.

[00:07:25]
So let's use the color and the size, and let's pass these in.
>> Kadi Kraman: It's lovely.
>> Kadi Kraman: And let me just change this to an explicit tone, so we don't need turn keyword.
>> Kadi Kraman: There we go, all right, and then we'll want to do the same for the counter and the ID app.

[00:08:04]
>> Kadi Kraman: So for the counter, I think we can look at our clock. I think this one looks good.
>> Kadi Kraman: And let's copy it.
>> Kadi Kraman: TabBarIcon and same as before, we'll get the color and the size. And passes-in.
>> Kadi Kraman: Use the correct braces. There we go and then lastly the idea, I think I used a lightbulb, yeah.

[00:08:54]
Let's go for a lightbulb. So, lightbulb.
>> Kadi Kraman: And this one is good and we'll copy it, import it.
>> Kadi Kraman: And tabBarIcon,
>> Kadi Kraman: De-structure the color and size, and pass them in.
>> Kadi Kraman: Now, the reason that you use these passed-in colours, is actually that you can define them at a global level.

[00:09:51]
So if you wanna change what color you're using, in this top-level tabs component, it has options as well. So you can use screen options and here, you can do tabBarActiveTintColor. So there's also an inactive tint color, unless you use our beautiful cerulean color. So theme, import theme, and colorCerulean.

[00:10:22]
>> Kadi Kraman: There you go and you can see that both the text and the icon actually changed color.