SkillsAdd

wix/react-native-navigation · Archived

rnn-codebase

Navigate and work with the react-native-navigation (RNN) codebase. Use when fixing bugs, adding features, tracing command flows, understanding options resolution, or working across JS/iOS/Android layers in this repo.

First seen Mar 18, 2026

Installation

$ npx skills add wix/react-native-navigation --skill rnn-codebase
View on skills.sh ↗ GitHub repository ↗

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

wds-docs Same author
wix/skills

Wix Design System component reference. Use when building UI with @wix/design-system, choosing c…

329 installs
wix-vibe-headless Same author
wix/skills

Client-only, dependency-free REST scaffolds for connecting an already-built front end (a vibe-c…

317 installs
wix-docs Same author
wix/skills

Look up the Wix API/SDK documentation to confirm an exact endpoint, HTTP method, request/respon…

310 installs
wix-headless Same author
wix/skills

Connect Wix business services (Stores, Bookings, CMS, Blog, Events, Forms, and more) to a Wix H…

294 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Same topic
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Same topic
vercel-labs/agent-skills 326.5K installs
supabase Same topic
supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

263K installs
vercel-react-native-skills Same topic
vercel-labs/agent-skills 205.5K installs
vercel-react-view-transitions Same topic
vercel-labs/agent-skills 115.9K installs
More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 13.2K
License LICENSE
Default branch master
Open issues 28
Status Archived

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 8,206 B
  • docs SUMMARY.md 236 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 7 installs

SKILL.md

React Native Navigation Codebase

Architecture Overview

RNN has three layers that mirror each other:

JS/TS (src/)  →  TurboModule bridge  →  iOS native (ios/)
                                     →  Android native (android/)

A navigation command (e.g. push) flows:

  1. Navigation.push() → Commands.ts → processing pipeline → NativeCommandsSender.ts
  2. TurboModule: RNNTurboModule (iOS) / NavigationTurboModule.kt (Android)
  3. iOS: RNNCommandsHandler → RNNViewControllerFactory → UIKit controllers
  4. Android: Navigator → LayoutFactory → View-based controllers (no Fragments)

Read [ARCHITECTURE.md](../../ARCHITECTURE.md) for the full overview.

Key Cross-Layer Mappings

Layout Types → Native Controllers

JS Layout Type iOS Controller Android Controller
component RNNComponentViewController ComponentViewController
stack RNNStackController (UINavigationController) StackController
bottomTabs RNNBottomTabsController (UITabBarController) BottomTabsController
sideMenu RNNSideMenuViewController (MMDrawerController) SideMenuController (DrawerLayout)
topTabs RNNTopTabsViewController TopTabsController (ViewPager)
splitView RNNSplitViewController N/A (iOS only)
externalComponent RNNExternalViewController ExternalComponentViewController

Options → Presenters

Each controller type has a Presenter that applies options to views:

iOS Controller iOS Presenter Android Presenter
RNNComponentViewController RNNComponentPresenter ComponentPresenter
RNNStackController RNNStackPresenter + TopBarPresenter StackPresenter
RNNBottomTabsController RNNBottomTabsPresenter BottomTabsPresenter
RNNSideMenuViewController RNNSideMenuPresenter SideMenuPresenter

Events (same names both platforms)

Event Trigger
RNN.ComponentDidAppear Screen becomes visible
RNN.ComponentDidDisappear Screen hidden
RNN.NavigationButtonPressed TopBar button tap
RNN.BottomTabSelected Tab changed
RNN.ModalDismissed Modal dismissed
RNN.ScreenPopped Screen popped from stack
RNN.CommandCompleted Any command finished

Where to Find Things

By task: "I need to fix/change X"

Task JS File(s) iOS File(s) Android File(s)
Command execution src/commands/Commands.ts ios/RNNCommandsHandler.mm react/NavigationTurboModule.kt
Layout creation src/commands/LayoutTreeParser.ts ios/RNNViewControllerFactory.mm options/LayoutFactory.java
Options processing src/commands/OptionsProcessor.ts ios/RNNNavigationOptions.mm options/Options.java
Options application — ios/*Presenter.mm viewcontrollers/*Presenter.java
TopBar src/interfaces/Options.ts (TopBarOptions) ios/TopBarPresenter.mm, ios/RNNUIBarButtonItem.mm views/stack/topbar/
Bottom tabs src/interfaces/Options.ts (BottomTabsOptions) ios/RNNBottomTabsPresenter.mm viewcontrollers/bottomtabs/
Modals src/commands/Commands.ts ios/RNNModalManager.mm viewcontrollers/modal/ModalStack.java
Overlays src/commands/Commands.ts ios/RNNOverlayManager.mm viewcontrollers/overlay/OverlayManager.kt
Animations src/interfaces/Options.ts (AnimationOptions) ios/ScreenAnimationController.mm viewcontrollers/stack/StackAnimator.kt
React view rendering — ios/RNNReactView.mm react/ReactView.java
Events to JS src/adapters/NativeEventsReceiver.ts ios/RNNEventEmitter.mm react/events/EventEmitter.java
Component registration src/components/ComponentRegistry.ts — —
Deep linking (URL → screen) src/linking/ (LinkingHandler, URLParser, RouteMatcher, DeferredLinkQueue, ModalLayoutBuilder) ios/RNNAppDelegate.mm (dispatchDeepLinkURL:, cold-start queue, RCTContentDidAppearNotification) NavigationActivity.onNewIntent → ReactGateway

By directory

  • src/ — JS public API, commands, processing pipeline. See [src/ARCHITECTURE.md](../../src/ARCHITECTURE.md)
  • ios/ — All Obj-C/C++ native code. See [ios/ARCHITECTURE.md](../../ios/ARCHITECTURE.md)
  • ios/TurboModules/ — New architecture entry points (RNNTurboModule, RNNTurboManager, RNNTurboCommandsHandler)
  • android/src/main/java/com/reactnativenavigation/ — All Java/Kotlin native code. See [android/ARCHITECTURE.md](../../android/ARCHITECTURE.md)
  • playground/ — Demo app for development and E2E tests
  • playground/src/screens/ — Test screens exercising every feature
  • playground/e2e/ — Detox E2E tests

Options Resolution Order

Options are applied in ascending priority:

  1. Default options (from Navigation.setDefaultOptions()) — lowest priority
  2. Static options (from component class or Navigation.registerComponent)
  3. Options passed in the layout call (e.g. push, setRoot)
  4. mergeOptions() — runtime override, highest priority

JS Processing Pipeline (exact order)

API layout → OptionsCrawler.crawl() → LayoutProcessor.process()
  → LayoutTreeParser.parse() → LayoutTreeCrawler.crawl()
  → OptionsProcessor (colors, assets, custom) → NativeCommandsSender

iOS Patterns

  • All controllers conform to RNNLayoutProtocol
  • RNNBasePresenter subclasses apply options — applyOptionsOnInit:, applyOptions:, mergeOptions:resolvedOptions:
  • Commands run on main thread (RCTExecuteOnMainQueue)
  • React views: RNNReactView wraps RCTSurfaceHostingView (new arch)
  • Overlays use separate UIWindow instances (RNNOverlayWindow)
  • RNNReactComponentRegistry caches React component instances

Android Patterns

  • View-based, NOT Fragment-based
  • All commands dispatched via UiThread.post()
  • ViewController<T extends ViewGroup> is the base — createView() is abstract
  • ParentController extends ChildController extends ViewController
  • Bottom tabs use AHBottomNavigation library
  • Three root layouts in NavigationActivity: rootLayout, modalsLayout, overlaysLayout
  • Tab attachment modes: Together, OnSwitchToTab, AfterInitialTab

Development Workflow

Playground app

  • yarn start — Metro bundler
  • yarn xcode — Open iOS project
  • yarn studio — Open Android project
  • yarn pod-install — Install iOS pods

Testing

  • yarn test-js — Jest unit tests
  • yarn test-unit-ios — iOS native unit tests (XCTest)
  • yarn test-unit-android — Android native unit tests (JUnit + Robolectric)
  • yarn test-e2e-ios-ci / yarn test-e2e-android-ci — Detox E2E tests

Building

  • yarn prepare — Builds src/ → lib/ (ESM + types)
  • Codegen config: rnnavigation in package.json

Common Gotchas

  • iOS uses UIKit subclasses (UINavigationController, UITabBarController); Android uses custom View hierarchy
  • splitView is iOS-only
  • Side menu: iOS uses MMDrawerController (3rd party); Android uses DrawerLayout (native)
  • Options that exist in JS types may not be implemented on both platforms — check the presenter
  • passProps are stored in JS Store, not sent to native (cleared before bridge crossing)
  • The lib/ folder is generated — never edit it, edit src/ instead
  • Deep links are processed only after the first setRoot() resolves; pre-bridge URLs on iOS are queued natively in RNNAppDelegate and flushed on RCTContentDidAppearNotification (bridgeless mode — RCTJavaScriptDidLoadNotification does NOT fire)
  • ModalLayoutBuilder strips React-reserved keys (ref, key) from URL query params before they reach passProps, to avoid React 19 ref-validation crashes