When building mobile apps, how users move between different parts of your application is crucial. Tabs are a common pattern for primary navigation, showing peer-level sections that users switch between frequently, like "Home," "Search," or "Profile." They're always visible at the top or bottom of the screen, making core app functionality easily accessible. For drilling down into content, like viewing details of an item from a list, we use Stacks. Imagine a stack of cards: when you tap an item, a new screen (card) pushes on top, and a "back" button removes it, revealing the previous screen. This creates a clear hierarchical flow.
Sometimes you need to offer navigation options that aren't always visible, or temporary interactions. Drawers (often called "hamburger menus") are ideal for secondary navigation, like "Settings," "Help," or "About Us." They slide out from the side of the screen when activated, keeping the main screen clear. For focused, temporary interactions, Modals pop up, overlaying the current screen. They usually demand user attention, such as a login form, a confirmation dialog ("Are you sure?"), or displaying a large image. Modals typically require an explicit action to dismiss, ensuring the user completes a task or acknowledges information before returning to the main flow.
Effective mobile apps often combine these patterns. For instance, an app might use tabs for its main sections, and within each tab, use a stack to navigate deeper into content. A drawer could house less-frequent options, and modals could handle specific actions like adding a new item or confirming a deletion. Understanding when to apply each pattern helps create an intuitive and efficient user experience, making your app easier and more enjoyable to use.
Key Takeaways
- Tabs: Best for primary, frequently accessed, peer-level app sections.
- Stacks: Ideal for hierarchical navigation, drilling into details with a clear back path.
- Drawers: Suited for secondary, less frequently accessed options, hidden until needed.
- Modals: Used for temporary, focused tasks or critical information that requires immediate user attention.
Code Example
How this code works
This code demonstrates how to navigate between different screens in a mobile application using a "stack" metaphor, much like stacking plates. The viewItemDetails function handles moving from a general list screen to a more specific screen showing an item's details. It achieves this by calling navigation.push('DetailsScreen', { id: itemId }). The navigation.push() command adds a new screen, named 'DetailsScreen', to the top of the stack. It also passes along relevant data, like the itemId, so the new screen knows which item to display. Crucially, the previous list screen remains active but hidden underneath this new details screen, ready for when a user wants to go back.
To return to the previous screen, the goBackToList function is used. This function calls navigation.pop(). The navigation.pop() command removes the current screen from the very top of the navigation stack, much like taking the top plate off a stack. This action automatically reveals the screen that was directly underneath it. A subtle but important point for beginners is that navigation.pop() doesn't require any arguments because it always targets and removes only the currently displayed screen, effectively reversing the last push operation.