Phase 2: React Native & Cross-Platform

Stack, tab & drawer navigators with React Navigation

Intermediate ~3 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

When you use an app on a phone or tablet, you're constantly moving around – tapping buttons, swiping, going from one screen to another. This is called 'navigation', and it's super important for making an app easy and fun to use. Think of it like building a tall LEGO tower. You put one block down, then stack another right on top, then another. When you open a new screen in an app, it’s like putting a new LEGO block onto the stack. If you press the 'back' button, it's like carefully taking the top block off, revealing the one underneath. This 'Stack Navigator' is perfect for going deeper into something, like clicking on a friend's name to see their profile, then tapping one of their pictures to see it bigger. Each step adds a block, and going 'back' removes them one by one.

Now, imagine your LEGO project is a big castle, and you want to jump between a few main areas, like the Royal Hall, the Wizard's Tower, and the Dragon's Den, without having to take apart other rooms. You’d build special, easy-to-reach doorways – let's call them 'tabs' – right at the bottom of your castle floor that let you instantly step from one main section to another. In apps, this is exactly what the Tab Navigator does. You often see buttons at the bottom of the screen for 'Home', 'Search', or 'Profile'. These tabs let you quickly switch between different big parts of the app, and it's really handy because each tab remembers where you were – so you can switch away and come back to exactly where you left off!

Finally, what if your castle has even more cool places – like a secret treasury or a hidden dungeon – but you don't want special doorways for all of them cluttering up your main floor? Instead, you build a secret passage that's usually hidden. You might pull a small lever, and suddenly a wall slides open, revealing a whole list of destinations! You pick one, and the wall slides closed again. That's like the Drawer Navigator. It's often a menu that slides out from the side of the screen when you tap a little icon (sometimes called a 'hamburger' menu). With these tools, you can build apps where users can easily explore lots of different screens and sections, making your creations super organized and fun to use!

As you build out mobile applications with React Native, efficient navigation is paramount for a smooth user experience. React Navigation is the de-facto standard, offering a suite of navigators tailored for different UI patterns. The Stack Navigator is your most fundamental tool; it manages screens in a stack-like fashion. When you navigate to a new screen, it's pushed onto the stack, and pressing the back button pops the current screen off, revealing the previous one. This is ideal for linear workflows, deep-diving into details (e.g., product list -> product details), and maintaining a clear history for the user.

For top-level application sections, the Tab Navigator is your go-to. Typically displayed at the bottom of the screen (on iOS) or sometimes at the top (on Android), it allows users to quickly switch between distinct, parallel feature sets without losing their place within each section. Think of common apps with 'Home', 'Search', and 'Profile' tabs. Each tab usually represents a separate, independent root for a new navigation flow, providing a persistent and easily accessible way to move between major parts of your application.

Finally, the Drawer Navigator provides an off-screen menu, usually sliding in from the side. This is particularly useful for features that aren't accessed as frequently as main tabs or when you have a large number of primary sections that wouldn't fit neatly into a tab bar. It's a common pattern for 'Settings', 'Help', 'About', or 'Logout' options. A crucial aspect of React Navigation is that these navigators can be nested. For instance, you might have a root Stack Navigator, where one of its screens is a Tab Navigator, and within each tab, you might have another Stack Navigator. This powerful nesting capability allows you to construct complex, intuitive navigation hierarchies that mimic real-world app structures.

Key Takeaways

  • Stack Navigator: For linear flows; screens are pushed and popped like a history stack.
  • Tab Navigator: For primary, parallel app sections; allows quick switching between distinct features.
  • Drawer Navigator: For secondary menus or numerous top-level options; slides in from the side.
  • Navigators can be nested to create complex, intuitive navigation hierarchies.
  • Understanding when to use each navigator is key to a well-structured mobile app.

Code Example

javascript
Preview

How this code works

This code sets up a common navigation pattern in a mobile app: a bottom tab bar for primary sections, with the ability to push new screens over those tabs. It achieves this by first setting up a Tab.Navigator inside the HomeTabs function. This navigator defines two main sections, "Feed" and "Profile", each linked to its respective screen component. This HomeTabs component then becomes a key part of the larger RootNavigator, effectively bundling the tab navigation into a single unit.

The RootNavigator uses a Stack.Navigator to manage the overall flow. Its first Stack.Screen, named "MainApp", uses the HomeTabs component as its content. This clever nesting means the entire tab bar and its content are considered a single "screen" within the stack. A subtle but important detail here is options={{ headerShown: false }} for "MainApp". This prevents the Stack.Navigator from displaying an extra header above the tab bar, ensuring a clean interface. Any subsequent Stack.Screens, like "PostDetails" showing PostDetailsScreen, will then appear on top of the tab bar, temporarily hiding it and presenting a new header as expected for a stack navigation.

Related Articles

Hand-picked reads to go deeper on navigation.

Back to Mobile Developer Roadmap