How react-native-screens optimizes a deep stack

WHAT THIS TESTS Understanding why a deep navigation stack consumes memory and what react-native-screens actually does about it. The interviewer wants the distinction between the native view hierarchy and your React component tree.

A GOOD ANSWER COVERS Without the library, React Navigation renders every screen in the stack into one large native view tree; screens beneath the top stay attached even though they are not visible, so memory and layout work scale with stack depth. react-native-screens wraps each screen in a native container, a UIViewController on iOS and a Fragment on Android. Screens that are not the active one can be detached from the native hierarchy, letting the platform free their views, while the React state can be preserved. It is enabled by default through enableScreens and is the foundation of the native-stack navigator, which delegates transitions and gestures to the platform's own navigation controllers for smoother animations and lower overhead.

COMMON WRONG ANSWERS Saying it unmounts your JavaScript components entirely, when by default it detaches native views while React state can remain. Treating it as a replacement for React Navigation rather than an enabler underneath it. Believing you must manually install and wire it in modern versions, when it ships enabled. Confusing it with FlatList virtualization, which is about list rows, not screens.

LIKELY FOLLOW-UPS What is the difference between the JS-based stack navigator and the native-stack navigator? How does detachInactiveScreens interact with screens that hold media or maps? What are the trade-offs of native-stack for custom header animations?

ONE CONCRETE EXAMPLE In a master-detail app a user drills five screens deep into a product catalog. Without react-native-screens, all five native view trees stay mounted, and a heavy detail screen with images keeps its layers in memory. With the library, the four screens below the top are detached natively, so their views are released; when the user pops back, the screen reattaches and React re-renders from the preserved state, keeping memory roughly proportional to the visible screen rather than to stack depth.