Navigation Exercise

[00:00:00]
>> As you can see, so currently we have a hard coded value and a hard coded color palette. We would like these to be dynamic. So what we wanna do is we want to pass the palette name and the colors down to the color palette screen so it could be extended to render any color palettes we want.

[00:00:22]
And you can do this as a second argument in the navigate prop. So the first argument is always the name of the screen you will navigate to, and the second argument is optional. But it can be properties that you want to be passed into the color palette screen.

[00:00:42]
For screens that you've navigated to, you get a special route param added automatically. So this is out of the same way as the navigation param. And these parameters will become available from route.params.paletteName. So for example here, if you do route.params.paletteName, you will get Solarized. So for this exercise, there's four parts to this.

[00:01:04]
Firstly, update the app so that the colors and the name are being passed into the color palette dynamically, which makes it reusable. And I've also linked to the right place in the documentation. The second part is making sure that the page title will be the name of the color palette instead of the name of the page.

[00:01:24]
So that's what we just discussed as well. Then we want to add two more color schemes. We added the colors for these, now we wanna have rainbow color scheme and the Frontier Masters color scheme. And finally, this is kind of a stretch goal, but we'd like to update the homepage so that it displays the first five colors of the color scheme.

[00:01:48]
Kind of like in a little rose, you get a little preview. So here's one I built earlier for me to reference.