Native Navigation in JavaScript World

Boba contrasts hand-built navigation, which requires managing views and state, with React Navigation’s ready-made navigators, including stacks, tabs, and drawers. React Navigation uses React Native Screens to connect its API to native screen components.

With the native stack, iOS and Android controllers handle screen changes, animations, and orientation. A JavaScript stack still uses React Native Screens: inactive screens are detached to save memory while their React component state remains preserved. Screens also provides primitives such as Screen, ScreenContainer, and ScreenStack.

Boba traces the flow from navigator routes through Native Stack View and Route View, which apply screen options, context, and header configuration. Codegen components then pass Screen, ScreenStack, and Header Config calls to native code.

Expo Router maps files in an app directory to routes, supports dynamic paths, and uses React Navigation underneath, so it also uses React Native Screens. Boba sees Expo Router’s automatic deep linking and type safety as useful for new projects, while React Navigation remains straightforward and well supported for existing apps. He says a full rewrite is not necessary.

Boba describes React Navigation v7’s planned static configuration API for simpler TypeScript checking and deep linking. React Native Screens work included Android Material 3 support, collapsible headers, form sheets, and a split-screen proof of concept. In the Q&A, he explains that React Freeze can prevent hidden screens from triggering native renders and can be enabled with the Screens `enableFreeze` option.