Stack Navigator: JavaScript-based Screen Transitions
Stack Navigator treats your screens like a stack of cards: push a new screen on top, pop it off to go back. It’s ideal for standard navigation flows, but its JavaScript-based implementation means you trade the performance of a native solution for…
Why it exists
Mobile apps need a way to manage transitions between different views. A common user pattern is a hierarchical flow, where a user navigates deeper into a task (e.g., list -> detail -> edit) and then backtracks. Stack Navigator provides a structured, history-aware way to manage this common pattern.
The mental model
Think of a deck of playing cards. When you navigate to a new screen, you place a new card on top of the deck. The only card you can see and interact with is the top one. To go back, you remove the top card, revealing the one that was underneath. This is exactly how Stack Navigator manages your screen history.
How it works
Stack Navigator is implemented entirely in JavaScript. It uses libraries like react-native-gesture-handler to mimic the look, feel, and gestures of native navigation, such as swiping back on iOS. When you navigate to a new screen, its route is added to an array in the navigation state. The navigator renders the component for the last route in this array. Navigating back simply removes that last route from the array.
When to use it
Use Stack Navigator when you need deep customization of the navigation experience. Because it's built in JavaScript, you have fine-grained control over animations, header styles, and transition behaviors that might be difficult or impossible with a purely native solution. It's a good choice for apps where having a highly custom look and feel is more important than achieving maximum performance.
When not to use it
Avoid Stack Navigator if your top priority is the smoothest, most performant animations possible, especially on lower-end devices. In these cases, NativeStackNavigator is a better choice. NativeStackNavigator uses the underlying native navigation primitives of iOS and Android, resulting in better performance and automatic support for platform-specific features like large titles. The trade-off is less flexibility for customization.
One canonical example
An email app. You start with a list of emails (the 'Inbox' screen). Tapping an email pushes a 'Message' screen onto the stack. From the message, you might tap on a user's profile, pushing a 'Profile' screen onto the stack. The history is now [Inbox, Message, Profile]. Hitting 'back' pops the 'Profile' screen, returning you to the 'Message' screen. Hitting 'back' again pops the 'Message' screen, returning you to the 'Inbox'.
Interview question
Under which circumstance would a developer most likely choose Stack Navigator over a native navigation solution?
- a.If the app's navigation flow is entirely flat, without any hierarchical structure.
- b.When the application requires the absolute fastest possible screen transitions.
- c.To ensure seamless integration with native platform-specific UI components.
- d.For applications where a highly unique and custom navigation appearance is crucial.Correct
Why? this is the answer
The card states that Stack Navigator is ideal when "having a highly custom look and feel is more important than achieving maximum performance," due to its JavaScript-based implementation allowing deep customization. Option B is incorrect because Stack Navigator trades performance for customization, and option C describes a benefit more aligned with native solutions.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles