# React Native Navigation — Fully Native Navigation by Wix

> A complete native navigation solution for React Native that renders each screen with its own native host, delivering platform-authentic transitions, gestures, and performance on iOS and Android.

## Install

Save in your project root:

# React Native Navigation — Fully Native Navigation by Wix

## Quick Use
```bash
npm install react-native-navigation
npx pod-install
npx rnn-link
```
```js
const { Navigation } = require('react-native-navigation');
Navigation.registerComponent('Home', () => HomeScreen);
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({ root: { stack: { children: [{ component: { name: 'Home' } }] } } });
});
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-64711cec
Author: AI Open Source