Navigation in Brownfield Apps

Chudziak walks through the standard React Native setup and notes that an embedded screen can show a white flash while React Native loads. Integrating more screens raises questions about reusing the React Native instance, native gestures, Android’s back button, headers, and returning to native screens.

On iOS, views render content, view controllers manage view hierarchies, and UINavigationController manages a stack of child controllers. On Android, views sit within activities, while fragments support multiple screens in a single activity; Jetpack’s NavController swaps fragment destinations.

Chudziak says React Native should be ready before a screen is pushed to avoid flashes, and native and JavaScript navigation stacks need to stay in sync. He recommends React Navigation for the JavaScript stack, initializing the bridge and loading the bundle ahead of a push, then retaining and reusing that bridge instance.

Register each React Native entry point with a name and root component, then render it natively with an RCTRootView on iOS or a ReactRootView on Android. Native view controllers, activities, or fragments can host those views, while native methods and fields handle platform gestures and back behavior.

Chudziak presents Callstack’s React Native Brownfield library as a set of helpers for bridge startup and storage, native containers, and controlling navigation behavior from JavaScript. He says it supports different native languages and navigation patterns, offers customizable defaults, and was available on GitHub and npm at the time of the talk.