Stack Navigator vs Tab Navigator and nesting

WHAT THIS TESTS This checks understanding of the two most common React Navigation patterns and the standard way to combine them in a real app shell.

A GOOD ANSWER COVERS A Stack Navigator models a stack of screens. You push to go deeper and pop to go back, it typically shows a header with a back button, and it suits hierarchical flows like list to detail. A Tab Navigator, whether bottom tabs or top tabs, presents several parallel sections at the same level. Selecting a tab switches the visible screen, but tabs by themselves are about lateral movement between top-level destinations, not a history you pop through. The common composition is to nest a Stack Navigator inside each tab. Each tab then owns an independent stack, so a user can drill into details within the Home tab, switch to the Profile tab, and return to Home to find their previous detail screen still in place. This preserves per-tab navigation state and gives each section its own back behavior, which is exactly how most production apps with a bottom tab bar are structured.

COMMON WRONG ANSWERS Thinking tabs maintain their own push and pop history without a nested stack. Believing you cannot nest navigators. Assuming switching tabs resets the inner screen to the root every time.

LIKELY FOLLOW-UPS How does nesting affect where the back button and headers appear? How do you navigate to a screen in another tab's stack? What state is preserved when switching tabs?

ONE CONCRETE EXAMPLE A shopping app has bottom tabs for Home, Search, and Cart. Each tab contains its own Stack Navigator. In Home the user opens a product detail, switches to Search to look something up, then taps Home again and the product detail is still showing because the Home stack retained it. Each tab thus has independent drill-down history layered under a single shared tab bar.