React Native Navigation — Fully Native Navigation by Wix

Introduction

React Native Navigation by Wix runs every screen inside its own native view controller (iOS) or fragment (Android), which means transitions, gestures, and back-button behavior match what platform users expect. It is designed for apps that need the feel of a fully native navigation stack without writing native code.

What React Native Navigation Does

• Provides stack, tab, side-menu, and modal navigation with native implementations
• Renders each screen in its own native container for independent lifecycle management
• Supports deep linking and dynamic screen registration at runtime
• Offers a declarative layout API to define complex navigation hierarchies
• Handles split-view and multi-window layouts on iPad and large Android screens

Architecture Overview

Unlike JavaScript-driven navigators, React Native Navigation delegates layout and transitions entirely to native code. On iOS each screen lives in a UIViewController managed by a UINavigationController; on Android each screen is a Fragment inside a dedicated Activity or FragmentTransaction. The JavaScript layer sends layout commands via the bridge, and native modules execute them, ensuring 60 fps transitions even under heavy JS load.

Self-Hosting & Configuration

• Run npx rnn-link after install to patch native projects automatically
• Register all screens before calling Navigation.setRoot in the app launch listener
• Configure default navigation options globally via Navigation.setDefaultOptions
• Use the overlay API for toasts or floating UI that lives above the navigation stack
• Enable bottomTabs.animate and stack.animate options for custom transition control

Key Features

• True native navigation controllers on both platforms for authentic feel
• Independent screen lifecycles so one slow screen cannot block another
• Built-in support for shared element transitions between screens
• Dynamic and conditional navigation trees via the layout API
• Top bar, bottom tabs, and side menu components rendered natively

Comparison with Similar Tools

• React Navigation — JavaScript-driven with more community packages; RNN is native-first for better performance
• Expo Router — file-based routing on top of React Navigation; less control over native transitions
• react-native-screens — optimizes React Navigation with native containers but not a full navigation solution
• Flutter Navigator — Flutter's built-in routing; RNN is the React Native equivalent in spirit

FAQ

Q: Can I use React Native Navigation with Expo? A: Not with Expo Go since it requires native linking, but it works with Expo bare workflow and custom dev clients.

Q: How does performance compare to React Navigation? A: Screen transitions run on the native thread, so they are not blocked by JavaScript execution, resulting in smoother animations under heavy load.

Q: Does it support deep linking? A: Yes. Register your URL schemes or universal links natively, then handle them in the app launched listener to push the right screens.

Q: How do I migrate from React Navigation? A: Replace NavigationContainer with Navigation.setRoot, swap Stack.Screen for component registrations, and move tab definitions into bottomTabs layout objects.

Sources

• https://github.com/wix/react-native-navigation
• https://wix.github.io/react-native-navigation/