Form Solution: Adding the Navigation

[00:00:00]
>> Now what we want to do is navigate back to our home screen. So the way that you can do it is, so we have navigation, remember we have access to a navigation prop here because a modal is our top level component. And we could just do navigation.goBack.

[00:00:31]
We need else. So there and that will actually close the modal. But this is not what we want because we want to actually interact with the screen before and tell it what the user has inputted. So we can't use goBack, we want to use navigation.navigate, because here we can actually pass props to the screen, yeah.

[00:01:00]
So this name of the screen, I think was Home. So that's how we get to Home. Let's check that this works. Cool, okay, so this works. And now because we're navigating back to Home, we can actually add another argument here, which will be our palette that we just created.

[00:01:22]
So let's do newColorPalette. And I'm actually just gonna create a constant here. And this will just have the name, because we're going to have colors here. Let's just do empty colors for now. All right, so now this is being passed into Home. And where we access it, I think is in the route prop.

[00:02:04]
And we can do newColorPalette will be route.params.newColorPalette. Make sure that that's what we called it, yeah. And I already know that this is going to cause an error and that is because the route.params are actually undefined if no params are passed in. So if I save this, this is going to cause an error.

[00:02:34]
And that is because, by default, when we render the screen, it's rendered as a route screen and it doesn't have any params. So we need to actually make this conditional. So we do if route.params and this, otherwise, undefined. Nice. And now what we're gonna do is if this has been just added into our screen, we want to take it and add it to the top of our color palettes.

[00:03:09]
So I'm actually going to use a useEffect for this because it is dynamic based on the rendering cycle. So let's do a useEffect. That's better. And let's take this, we want to add it to setColorPalettes. So we want to if this exists, so if there is a new color palette.

[00:03:43]
Remember this is either undefined or it is the palette object. Then you wanna take this setColorPalettes. And you wanna take the current palettes. You want to return the current one first and then we're just going to spread the rest of them in. So this basically returns a new array where the new part that was just added will be added at the top of the array.

[00:04:23]
And the last thing we need to do is because this use effect will only run once, by default, remember, and you will go, okay, there are no new color palettes. Because by default nothing is passed into Home, and then it will just never run again. So in order for this to work, we actually need to also pass this into our dependencies array.

[00:04:46]
Now if I do New Palette, Did I name this something else? Okay, so this is meant to be not name but paletteName. All right, let's try this again. Okay, cool, so we didn't actually add any colors. So we just have this name here. Yeah, so we've added two new color palettes but with no color.

[00:05:22]
So we've got that bit wired up, which is great. Let's actually go ahead and make this Launch Modal button a little bit bigger to match this. So let's just make it big and make it teal. So style=(styles.buttonText). I should do buttonText. Let's make a fontSize of 18, fontWeight, bold.

[00:06:02]
And let's, what else do we have? Yeah, font color, let's make it teal. And add some marginBottom as well. Nice, okay, so here we've got our Launch Modal button. I'm just going to name this Add a color scheme. Nice, okay, so now we've got the name and we've got the text.

[00:06:47]
Now we need to figure out how to do those millions of, well, feels like millions, of little toggle buttons. Well, what I'm going to do is I'm gonna just take one of them and make it work with one. Because if you ever have a challenge, you don't know where to start, just get going.

[00:07:10]
That's what I usually do. You just start from there, from the smallest possible thing and things tend to work out. All right, so we'll need a switch, so let's import a switch. And let's add the Switch under here. Let's do value true. And was it on change or was it on toggle?

[00:07:46]
I don't use a Switch very often. Okay, so it's on change or on value change. Okay, on a value change it's the one that receives a new value as an argument and that's the one we want. Because we want to know if it's true or false. Okay, so onValueChange, I'm just gonna pass an empty function here.

[00:08:12]
Okay, cool, and so this works and we kind of want it to be a row of items. So I'm just gonna do a View first and put the Switch inside. And then add some text, so Color Name, Nice, and now we kind of want them to be side by side.

[00:08:45]
So we'll have to give this containing view a style to make these display in a row. So let's do style, styles.color, And this will be flexDrection row, nice. And now we want them to be like on opposite ends, so we can use justifyContent. And there's a couple of options here.

[00:09:28]
There's space between, space around, you probably wanna use space between. Cool, so now they're like on the opposite ends. And we kind of want that color to actually be centered with the toggle button as well. So let's just use alignItems center, okay, cool. So now they're centered with each other, which is nice.

[00:10:00]
And now I'm just going to add some padding, To the top and bottom, with paddingVertical. Nice, and then finally, I think all of these in the example actually had a little line underneath. Yeah, so I'm just gonna add a little line underneath as well. Actually there's padding here.

[00:10:29]
So maybe there should be padding all around. Let's do that. Let's just do padding 10 and borderBottomWidth 1 and borderBottomColor, let's do grey. Nice, you can't see it at the moment because the Submit button is in the way but you'll see that it won't actually matter.