React Native Tutorial #21 - Navigating Around

Key Takeaways

our other gang so at the minute we've created this Homestuck navigator right here and registered these two different screens and then when we surround it with this create app container function it returns a component which we're rendering right here and this determines which screens currently show currently this one right here because it's at the top of this configuration but that's all its really doing at the minute we need a way now to navigate between these two different screens using this navigator so how exactly do we do that well first of all let's go to the home screen because that's the one that loads up automatically by default and what I'd like to do is place a button in this component and when we click on that button take us to the review details component over here so first things first let's import button up here and then let's create that button down here and it's self closing we need a title prop on this button which is going to say something like go to review debts okay so if I save this at the minute we should see that button over here but when we click it it's not really gonna do anything yet so if I click it nothing happens so we need an on press handle so what I'm going to do is add that right here on press and set that equal to some kind of function which I'm going to define up here so Const and we'll call this press Handler and set it equal to an arrow function now inside this arrow function what we want to do is then navigate to the review details screen now how exactly do we do that well when we configure our navigation step like this every screen that we configure automatically gets a navigation property on the props assigned to it so in here you know that we can take in props right well we get a property on the props called navigation so props navigation like that and we can use that then to navigate to different screens in the stack so I'm going to get rid of that because what I like to do instead taking the props directly is 2d structure what we need from the props and we're going to D structure navigation so now we have access to this navigation object right here and what we can do is say now navigation and we can use a method on that call navigate and in here we can pass a string and the string is going to be where we want to navigate to and it has to be one of these things the names of the different screens so either review details or home so not this name and not this name even though they're the same whatever you called it right here so we want to go to review details so let me copy that dude and paste it in here in a string that's where we want to navigate to so then react navigation is going to look at this and it's gonna find this property inside our screens object right here and it's gonna say okay well if you want to navigate there I'm gonna show this screen this component right here that we import it and it's gonna then take us to that and show it on the screen so let me save this now and see if this works I'm gonna whoops no it doesn't so this there's a problem with oh that's because we've not said right here what we wants happen on press so we want to run the press handle up function like so so let me save that now and hopefully how this will work okay so when we click on this now go to review details and we get that screen and take a look at this we have this arrow automatically in the header we did not have to do a thing to put that there react navigation and the stack navigates in particular automatically places that arrow there and it knows that we've come from another screen and if we press this it can take us back to that original screen so if we think back to our stack we had the home screen at the bottom then we clicked on the button and that added this screen to the stack on top now if we click on this arrow right here it's gonna pop this screen back off the stack and it's gonna show the home screen underneath so click on that and we can now see the home screen underneath awesome so that works now that's an easy way to navigate from one screen to another we can also use a diff method and that is the push method so let me say navigation dots push and then if we play seeing it review details this is going to do the same thing only this is a bit more explicit right so remember when we were talking about the stack to add something to the stack we push it on and to take it away we pop it off so this is a more explicit method right here but it's going to do exactly the same thing so let's save that and just test it out and again click on that button and it still works and if I click on the back button it still pops it off automatically now when we're using these two there's not really much difference in the two different methods and I'm going to stick with this one at the top navigate but when you're making more complex apps sometimes you need a little more granular control over the stack and how it works and then you can use this push method for that now just like we have a push method we have a pop method as well and remember that pops a screen off the stack and that's actually what's happening behind the scenes when we click on this arrow but we can manually do that as well so let me comment out this one and bring this one back first of all then I'm gonna go to the review details component over here and the same in this component I want to add a button now inside here that when we click it is going to pop that screen off the stack so it's going to do exactly the same thing as the arrow at the top but this is a more manual approach and sometimes you might want a button or a link or something that when a user presses on it takes you back so I'm going to show you how to do that so first things first let's import the button at the top and then down here will create that button and the title this time is going to be something like back to home screen so title is equal to back to home screen like so and then we also need an on press Handler so let's create a function up here to do that I'm going to say Const and then press handle again equal to a function and inside that function all we want to do is use navigation and remember we have to grab that the props so we destructor it navigation and again the reason we get access to this is because we've used this particular component in the stack navigator right so every component that we use in the stack navigator or automatically and gets this if we were to go to the about component we wouldn't get that because we've not configured that inside the stack navigator just the ones we've configured here and get access to it so we take that and we can use the go back method like so and that now pops a screen off the stack so now if I save this in fact let's not make the same mistake twice let's put press Handler in here then save it and see if this works so go to review details we can click on the back button that works let's do it again and this time click on this button and it does exactly the same thing it pops a screen off the stack and goes back to the home screen so now we know a little bit about how to navigate between screens let's add some data to the mix and see how it can pass data from one screen to another as well so basically we want a list of different reviews here eventually and when we click on a review we want to go to this screen and navigate here but we want to pass that particular review data into the component so we can render it so we'll see exactly how to do that in the next video