Adding Navigation

[00:00:00]
>> Now let's actually add some navigation into our app. There are two main types of navigation on your phone, there's a bottom navigation and a stack navigation. You've definitely seen both of these before, but you probably like not been consciously thinking about it. So if you open an app, I'm gonna go to Headspace.

[00:00:23]
But you can open another app like Twitter, Instagram, any app, but I thought Headspace is a nice one. I like the UI [LAUGH] so notice at the bottom, this is the bottom navigation. And most apps have this. And one thing to note is that as I navigate between these screens and the page loads immediately.

[00:00:45]
This means that actually all the bottom navigation route pages that you have gets rendered as soon as you open your application. So if you have any, like crazy data fetching that you're doing, be mindful of the fact that everything that gets launched when you launch the route page, get launched straight away.

[00:01:07]
Navigation in site pages is in stacks. Okay, so this open a full screen one but let's us look at this one, okay. So here, okay, notice that I'm tapping into a page, and it's opening a new page and it's giving me this back button. But if you look at the bottom, I'm still in the sleep menu.

[00:01:30]
So it's adding another page on top of my stack, but I'm not actually going to a whole different page. And another thing to notice is if I know being in this second page on the stack, if I go to home, and then back to here, notice I didn't reset the stack.

[00:01:47]
I'm still where I left off. So those are just two things to kind of notice about native navigation. Currently, we won't be adding boat navigation because we don't need it. We are just going to have a stack navigator. So what we wanna do is we wanna have a page that has a list of color schemes that you can tap on.

[00:02:06]
When you tap on them, they will open a page that lists that color scheme. All right, so these instructions are both Export and non-Export. So let's install the stack navigator. React Navigation has pretty much, they've broken all the different navigators into small libraries. So you just installed the bits that you need.

[00:02:35]
Now, I usually have a screens directory where I keep all my screens. So I'm going to do this here. So I already got components, and now let's just create another folder called screens, And this is where we'll keep all our screens. Now, we want to create two screens.

[00:02:56]
So we have a home screen and a color palette screen. So let's just go ahead and to that. Home.js > c=ColorPalette.js, and for the home screen, let's just add our default Hello world thing again. import React, Import a View and a Text of you and it Text from react-native.

[00:03:30]
We create a constant called Home, And we have it return a View with some Text. And finally we export the Home at the end of the file. So for the color palettes, we actually already know what we wanna render there. So we want to render pretty much this entire page.

[00:04:11]
So if we go to App.js and we copy the code that renders our color palette. So we'll have all of this, let's gonna do import React from react, const. So this export defaulted. And we'll also need to add all these imports. And we'll need to add the colorBox input.

[00:05:14]
Notice that we're in a different directory now, so we'll have to navigate up a directory in order to go to components. And finally, I think we can just copy all the styles as well. Do the same, don't forget to import the StyleSheet. All right, so now you should have a Home component that just renders our Hello world.

[00:05:59]
And the colour palette that should just has all the code in from our App.js that rendered the color palettes. Now, what we wanna do is actually while all of this up. So the first thing we need to do is we're going to go to App.js and remove all the code that we copied away to color palettes.

[00:06:20]
So we don't need the styles, we don't need this. We don't need to colors, and don't need any of this So we just have the navigation container. Next up, let's import both the home and the color palette screens. Now, we wanna import the createStackNavigator from react-navigation/stack. And you wanna create a stack.

[00:07:04]
And this basically creates kind of like a sandbox of screens that you can navigate between in a stack. And now we're going to use it inside a navigation container. So we have a Stack., what's it called? Navigator. All right, so this is actually defining the stack navigator. And then, we're defining all the screens in the stack.

[00:07:42]
So we do Stack.Screen, And we give it a name and a component. So name="Home" component. Let's add another one for the color palette. Cool, so now we got a NavigationContainer, we have a Stack.Navigator and we have two screens. Notice that the screen that you add to the top will be visible by default, so that will be the root of the stack.

[00:08:23]
If I made this to top. Okay, maybe not. Cool, so now we got a Home and a ColorPalette and we'd like to navigate between them. So what I wanna do is I want this to say solarized, and if I press on this, I want that new page to appear.

[00:08:46]
So let's go to Home. And in order to add interactivity into applications, we need some way for them to register user taps. Now, on the web you would have a button that has an on click, but on the phone we don't click, we press. So we have a selection of touchable components.

[00:09:09]
I got a list of them here. There's TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, and TouchableNativeFeedback. Most of the time, you'll be using TouchableOpacity and TouchableWithoutFeedback. Basically, TouchableOpacity will create some opacity while the press is ongoing in the component that it's wrapped around. And TouchableWithoutFeedback has no visual feedback, but it will register the tap.

[00:09:36]
So let's go ahead and use a TouchableOpacity. The way that the touchable elements work is that you basically wrap them around the area that you want to make touchable. So let's import this, And let's just wrap it around the text. Now on the web, you would have an onClick and on Native you have an onPress.

[00:10:09]
And onPress takes a function of something you wanna do when the user presses on this. Now, how do we navigate between screens? Well, I think you should definitely get used to looking at documentation because I do a lot, So if we just spec navigation doc's there's a light mode as well, if that's more to your liking and, Well, basically, we use the navigation prop.

[00:10:44]
So any screen that is inside this stack navigator that's defined here. So any screen that you pass into as a component also gets this special prop Boston called navigation. And navigation has a bunch of things that unless you do, you can navigate between screens. You can reset the navigator states.

[00:11:06]
You can go back, you can set prompts, etc. So we're going to use it to navigate to different screen. So Home and this gets passed into navigation. And, so all we can do, is here in the onPress, we can do navigation.navigate. And then we just pass in the name of the screen you want to navigate to.

[00:11:38]
Now, if I press on this, I've forgot to copy the colors. So if you're following on with me, I like I forgot to copy over the colors property, and I forgot to import text from React Native. By the way, this works, that's great. I'm gonna rename this to Solarized.

[00:12:06]
Yeah, we've got the basics. So one of the things to notice is that in React navigation the default color for the background is actually not white, it's kind of this grayish color. So I usually end up making the color white, so if I do container backgroundColor : ' white'.

[00:12:37]
And we also don't need the SafeAreaView anymore because, as you can see, because we have this header bar already. And React navigation kind of handles the safe area for us, which is kind of handy. And so we're going to use this [INAUDIBLE]. Cool. So the thing to note is we use the actual name of the screen to navigate to it.

[00:13:07]
So the screen names need to be unique. So if you look at App.js, we're actually using this Home or ColorPalette. So if we rename this name, we'll have to also rename all the places where we used to navigate. Cool. Well, now we got navigation.
>> What's the difference between the navigator versus the push method?

[00:13:42]
>> There push adds the screen to the top of the stack whereas, I think navigate is if you use the bottom nav, you could navigate to a different nav as well. Cuz I think push would automatically just add it to the top of the current stack. Whereas navigate you could use to also navigate between the bottom navs.

[00:14:03]
So we don't have a bottom nav at the moment, so we don't have difference.
>> So that header barred kind of just came with it magically, right?
>> Yeah.
>> Do you have control over the way that looks?
>> Yes, so you have complete control over it. Yes, okay, so you can pass in options into the stack screen.

[00:14:24]
And you can also set this dynamically, By using the options again, but you can add basically parameters to the route and you can use these parameters data dynamically, which we will going to do in the next exercise.