A Simple Breakdown of React Navigation

I recently made the leap to React Native with a solid understanding of React and was stumped for a little while at the beginning on how exactly to implement navigation in my native app. Our team was building a React Native app for the final project in our coding bootcamp that would connect prospective volunteers with local events being held by non profit organizations and we needed to accommodate for two separate user experiences. We had a login route for volunteers to view events in their area and to sign up as an attendee and we had a login route for organizations to post events they were holding and track the attending volunteers.

First we played around with React Native Router because we were coming into the project with React experience and we figured that since we’d used the router for our web apps it would be a simple transition to using it in a native app. It wasn’t. Giving urls to something that doesn’t need them ended up feeling superfluous and clunky. React Navigation swooped in to rescue us.

Stacks (react-navigation-stack)- A stack is essentially a stack of React components (or screens as they’re usually referred to in a native app) that the app transitions between as the user navigates. The screens sit one on top of the other, making it easy for the stack to provide the user with a back button at each screen, effectively moving back up one spot in the stack.

We used stacks as the most granular navigators in our app. When a volunteer was looking at a list of events to attend and tapped on an event that interested them the screens they navigated between were both parts of the EventsStack (pictured below).

There are a ton of ways to change the way the single screens inside of stack navigators behave. You can change a screen’s background color to transparent so that it works as a modal of sorts, which is real spiffy. The documentation for v4 has improved significantly from v3 so you should check out all the options you have for yourself! https://reactnavigation.org/docs/en/stack-navigator.html

Tabs(react-navigation-tabs)- The tabs live at either the bottom or the top of your application depending on the navigator that you use. We used tabs to nest our stacks in so that each tab housed a stack of three or four screens that the user could navigate between.

The way these are declared in your app is almost identical to the way that stacks are declared but instead of housing a single component inside of each tab, you have the option of sticking an entire stack in there. The ability to nest navigators inside of each other is what made React Navigation so easy to use. It gave us a way to structure the app that was easily changed when our designs changed and allowed us to move screens around quickly.

Switch- This navigator doesn’t need to be installed separately, it’s still a part of the react-native-navigation package. This is very similar to the stack navigator with one big distinction- once you leave this navigator there’s no going back (unless you log out)! This is the navigator we used at the top of our app before we had authenticated the current user as either a volunteer or an organization.

For our switch navigator we created a Login Stack that included all of our signup and login pages. Because this was a stack, the user was still able to use back buttons inside of the stack to move back from a login or signup page if they’d accidentally navigated there. But once they had been fully authenticated, we sent them to either the Volunteer Tabs or the Organization Tabs and there was no more going back from there.

Drawer (react-navigation-drawer)- We didn’t end up using a drawer navigator in our app mostly due to the way that we structured our user experience but drawer navigators are very cool and we still like them a lot. The drawer navigator is a globally accessible menu within your app that lets you navigate between many different stacks from a single place. It’s basically the tab navigator on steroids, hidden behind a hamburger menu icon.

It works almost identically to the tab navigator in that each of the menu options leads to either a stack or a tab navigator which may be nesting their own navigators. It’s also very easily customizable, allowing you to change everything from animated transition speeds to its position and width. I promise, the documentation is better this time around. Kudos to the native navigation team for making things a little clearer with the recent release of v4.

There’s your basic breakdown! I didn’t get too into specifics here but I hope with this foundational understanding you can go play around with nesting navigators and figure some stuff out for yourself. That’s half the fun of making stuff anyway ;)