In this lesson, you will learn the fundamental difference between building navigation interfaces using pure JavaScript versus leveraging native platform primitives.
The Two Approaches
When building navigation in React Native, you are essentially choosing where the "stack" lives.
1. JS-Based Navigation: This approach uses standard React components to manage screen transitions. Because the logic runs on the JavaScript thread, every time you push a new screen, the state change must travel across the bridge (or through the JSI). If the JavaScript thread is busy—perhaps performing a complex calculation or executing a large batch of updates—the navigation animation might stutter or drop frames. The UI is essentially "drawing" the movement of screens inside the React Native surface.
2. Native-Backed Navigation: This approach hooks directly into the platform’s native navigation controllers (like UINavigationController on iOS or FragmentTransaction on Android). Here, the JavaScript thread merely sends a "push" or "pop" command to the native side. Once the native layer receives this, the OS takes over the animation entirely.
Why Performance Matters
Think of the difference like this: JS-based navigation is like a puppet master pulling strings to move a character across a stage. If the puppet master gets distracted, the character freezes. Native-backed navigation is like pressing a button on a remote-controlled car; the car has its own motor and will keep moving regardless of what the remote control is doing.
Because native-backed navigation uses the host platform's own components (as discussed in Mapping View Components to Native Views), the transitions are handled by the main thread. This ensures that even if your JavaScript thread is heavily loaded, the back button swipe or the sliding animation remains buttery smooth because it doesn't wait for a round-trip across the bridge to calculate the next frame.
// Conceptually, you are moving from:
// <JSNavStack> (JS-driven state)
// to
// <NativeNavStack> (Host-driven animation)
By offloading the responsibility of view management and layout to the native host, you ensure that the application feels indistinguishable from a standard Swift or Kotlin app.
Key Takeaway: Native-backed navigation provides superior performance by offloading screen transitions to the main thread, bypassing potential bridge congestion and ensuring smooth UI responsiveness.