Opening a Full Screen Modal

[00:00:00]
>> All right, so now that we've learned a little bit about forms, let's do a little segue and talk about modals. So this is an example of what we want to get to. Basically what I want us to do is have a add a color screen button, which will open a modal and the modal will have a form where you can enter the color screen.

[00:00:22]
Press Submit and it will add the color screen at the top of this list. That's basically the end goal, that will be the last exercise. But in order to get to that, we actually need to do the modal thing first and I've added this as a separate section, because adding a modal requires editing of route navigation, so there's a little bit going on there.

[00:00:47]
Now, let's look at this little tree view that I next one react navigation. So this is basically what we want to get to. But currently, we have these three, we have the main stack and then we have which we just called stack at the moment. And this has two screens, it has the home screen and the excess detail screen.

[00:01:10]
Now what we want to do, is actually we have the RootStack and we have home and detail screen. What we're going to do is we want the RootStack to have to like sub stack we want to have a main stack and a modal screen. So you can think of these as how the screens are presented to use, it's kinda like a tree-ish view.

[00:01:32]
So in order to have a modal, we need to actually modify our stack layout. So we could have, add these MainStack and the ModalScreen in between. So you can reference these react navigation docs for how to do it, because we're basically following exactly what's here. Right, so to get started, let's rename our stack to RootStack.

[00:02:00]
So let's go to App.js, close on where the things are going on here. So let's rename this to RootStack, and then rename it to RootStack here, as well. And save make sure nothing's broken. All right, now what are we doing now? All right, so next we're adding a MainStack.

[00:02:31]
So I think I forgot to add this line, but underneath here, we have another one called MainStack and we create another StackNavigator. So now to reference we're creating this one and this one and notice that we're creating the ones that have kinda two prongs going out to them.

[00:02:54]
Now we're going to create a MainStack screen. Just gonna copy this code here. Right, so this is the screen. Notice that this is in a navigator the same way this was already in a navigator and I've pretty much just copied what was already here. So I've copied the content of what we currently had our entire stack and copied it into our main stack.

[00:03:30]
Next we want to update our app component to use a RootStack and a MainStack. So I'm gonna copy this here. [SOUND] Alright, so have a MainStack here. And this is where we can also add a modal. Yeah, we need so one thing to note is that, we need to have headers shown false here for example.

[00:04:09]
Because if we didn't, we would get two headers, because we're going to add a modal here and we want the modal to have its own header. Whereas because this RootStack has its own StackNavigator, it gets a header. So, that's something to be worried of when you are listing this things.

[00:04:30]
All right, and now we should add a modal. Let's create a new file called ColorPaletteModal and add it to our screens directory. Well, I'm gonna type this in cuz I have so far. Let's do hello world, import React from 'react'. If you type this enough, you could do it in your sleep Input {View, Text} from "react-native".

[00:05:13]
And we do const ColorPaletteModal. And return a. View. With some text. And finally we export it. Notice that the cool thing is that this component, even though it's a modal, it looks the same as all other components. We don't need to add any special configuration which is quite nice.

[00:05:58]
But that is also why is quite handy to separate your components and screens. Just so you know that's like you yourself will know that the screens will have the navigation props, whereas the components won't. Now finally, the thing what we wanna do is we want to add the new pallet modal into our App.js into the RootStack.

[00:06:24]
So let's go to App.js and let's import it. So import, ColorPalettesModal from screens. And we want to add a screen for ColorPaletteModal next have the RootStack one. The main one, so I'm basically I'm just gonna copy this code ColorPaletteModal. We do want the header and this should be colorPaletteModal.

[00:07:15]
Did I wrong, okay, screens not screen. Palette. [LAUGH] Okay, typo, I turned intelligence often now I'm regretting it. Cool, so now it's all wired up and all we need to do is start interacting. All right, so in order to do this, we need to just add a little button somewhere, so we could press it and launch the modal.

[00:07:54]
So let's go into our home, which is in here. And let's add a ListHeaderComponent. And in this ListHeaderComponent, let's do a TouchableOpacity. And let's do a Text inside, Launch Modal, it's an import, TouchableOpacity. And text. Cool, so now we've got a little button and we need to do it onPress.

[00:08:47]
So in order to launch the modal. We can just use the navigation prop again, which is kinda neat. So we do navigation.navigate and. There you go, so the cool thing about it, is that the way we navigate is actually the same between modals and just going into different screens.

[00:09:25]
So all the difficult thing about how to launch it was in the App.js. So to recap, so this is now our root component. We have a RootStack that has two screens. One of the screens is our MainStack. And to the screen is our Modal. And a MainStack we have our home and our ColorPalettes.

[00:09:49]
Now, the good thing about it is that, now that you have this set of ones, if you need to add any subsequent modals you can just add them here. You don't need to do this dance again. So, the question was how to properly handle the exhauster dependency warning.

[00:10:05]
From use effect, and that is because if you have the hooks es lint rules turned on, and you go, and you think it's going to be here so yeah, so here, if you have hooks exhorted dependencies turned on. Then anything you use inside here, it will tell you that you have to add it in here.

[00:10:30]
We're not sure how to go around it other than ignoring it, I personally don't have the hooks, these also dependencies turned on for this reason. Because I feel like they are quite flawed and as in, they don't account for all use cases. I had a particular thing where I was building a chart, that was actually on the web, we're building a chart, a quite complex charts.

[00:10:52]
And we turned on the exhausted like adding, we added all the hooks ESlint rules. And they also fixed adding all the parameters into useEffect. I'd actually broke our application and so it's kind of like you have to either be mindful and disable them yourself. Yeah, basically, you have to be mindful and not to use the ESlint rule or just disable them as needed.

[00:11:32]
>> I had a question about that. Looking at the navigation tree, trying to figure out why did why did we set up a tree of NavigationStacks versus just keeping it flat? Would you be able to accomplish the same thing within a single stack.
>> Well let's see what happens.

[00:11:57]
So if I put this ColorPaletteModal in here instead. Yeah, so it launches, but it launches as a page, not a modal. So the reason that we added it is because we want the bottom up modal experience. And if I added it here, then it's just another screen. The only way we can distinguish between a modal and a screen is notice that here we're doing mode= 'modal', which is that anything that we add will be added from the bottom up, which makes the modals work.