Component based Navigation in React Native

Sahoo contrasts browser navigation, where a URL determines the screen, with native apps, which need smooth transitions and familiar platform patterns. He describes how headers, gestures, and animations vary between iOS and Android, including across Android versions, making navigation complex to implement consistently.

Sahoo reviews earlier options, from iOS-only NavigatorIOS to JavaScript-based Navigator and the low-level NavigationExperimental. He also discusses native React Native Navigation and Expo’s ExNavigation, noting trade-offs such as platform support, animation performance, customization, and React-style composition. React Navigation brought contributors from Facebook, Expo, Callstack, and the wider community together around a simpler, customizable API.

A navigator manages both transitions and navigation state, including the current screen and back history. React Navigation combines core logic and routers with UI patterns such as stacks, tabs, and drawers. Sahoo describes a stack as cards pushed onto and removed from a pile, alongside platform-specific tab and drawer patterns.

The earlier API used static configuration, which limited access to props, state, and context and made screen options difficult to change dynamically. The rewritten API defines screens as children during render, enabling conditional routes such as showing Feed and Account when logged in and Login or Signup otherwise. Sahoo also covers dynamic options, hooks, TypeScript editor support, native stack and tab integrations, and Redux DevTools time travel.