React Native Week 2: Navigation
Alright folks, so this week marks my second week on React Native. I’ve been using Native Base as a library which make everything incredibly easy to work with. One of the question I had last week was how I would be tackling the routes as they aren’t urls in the same way that they would be if the app were on a browser.
I’ve been using react navigation which is a standalone library for you to set different screens. Just like how in React.js, you’d use <Router/> to wrap all your components in your single page application, we’ll be using <NavigationContainer/>, <Stack.Navigator/>, and <Stack.Screen/>.
Heres a link to install react navigation : https://reactnavigation.org/docs/getting-started.
As of now, the four pages I’m concerned with in my app are the Homepage, Login, Signup, and the Welcome page. So we import our components of interest and we call them inside of our <Stack.Screen> as the component attribute. One thing to note is that I want my homepage to be the first thing people see so inside of my <Stack.Navigator> I used an attribute called “initalRouteName” to establish my “Homepage” as the first page you’ll see upon opening it. Yes, I know it says ‘home’ but is should say ‘Homepage’. By the end of this, you should have all your screens inside the Navigation Container component.
Check out this GIF I definitely didn’t make two minutes ago with dimensions that are too big. The app opens up in the ‘homepage’ and I’ve set login/join to be there own separate pages that are shown when my buttons are clicked. So how did I create my buttons such that onPress, it knows to navigate? Great question! Remember how <Stack.Screen> has an attribute called ‘components’? Well those components receive a prop called ‘navigation’ which is an object full of functions. Also, remember how <Stack.Screen> has a “name” attribute that we’ve named ‘homepage’ or ‘login’? That comes to play here. Check it out!
Great, so ‘HomeScreen’ has a button that calls on our navigation object and calls on a function called ‘navigate’ which takes two parameters. The first parameter is the name of the page screen you’d like to show, and the second is information you want to send to that component as a prop. That’s it!
Some key things to remember is to make sure that the components that will have button to navigate are inside the <Stack.Screen> container or else you will not have ‘navigation’ as a prop. Also remember that the navigate function takes the ‘name’ of the screen you want to go to. So make sure the first argument of navigate and the name inside of <Stack.screen> correspond to each other. You may have named your login as “Login” page but used ‘login’ as a parameter for navigation which will prompt an error. As always, happy coding!
