DOCSEARCHbyAlgolia
Submit Docs

React Native Navigation

repository·master·Indexed 11 days ago

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

A native navigation library for iOS and Android that provides 100% native platform navigation through a cross-platform JavaScript API. Version 8.8.9 supports stack, bottom tabs, side menus, and top tabs, utilizing a layered architecture that bridges JavaScript commands to native controllers for maximum performance.

Tokens
73.2K
Snippets
248
Records
339
Agent score
95%

What's inside React Native Navigation

  2. Explore React Native Navigation community extensions

    master

    Several community-maintained extensions provide enhanced UI patterns and specialized navigation behaviors:

    • React Native Navigation Drawer Extension: Provides a Drawer API built specifically for React Native Navigation on both iOS and Android.
    • React Native Navigation Search Bar: A search bar implementation using React Native Elements that features a collapsible header, optimized for use within React Native Navigation.
    • React Native Navigation Bottom Sheet Extension: A customizable and performant bottom sheet component built to work on top of React Native Navigation.

  3. Explore React Native Navigation community utilities

    master

    The community provides several utility libraries to simplify common tasks when using React Native Navigation:

    • React Native Navigation Hooks: A collection of React hooks designed to interact with the navigation state and APIs within functional components.
    • React Native Navigation Register Screens: A utility function that allows you to register an array of screens in a single call, providing an alternative to calling Navigation.registerComponent multiple times for each individual screen.

  4. What is a Stack layout?

    master

    A Stack is a container layout that promotes hierarchical navigation. It is used to navigate between screens at consecutive levels of hierarchy, steps in a flow, or across an app.

    Key Behaviors:

    • Hierarchy: The first child in the children array is the root (bottom of the stack). The last child is the currently displayed screen.
    • Navigation: New screens are added to the top using Navigation.push. Tapping the back button pops the top-most screen.
    • TopBar: The Stack manages a TopBar at the top of the screen, which displays the current screen's title and buttons.
    • Visibility: You can hide the TopBar using topBar: { visible: false }. By default, screens render below the TopBar, but you can change this with topBar: { drawBehind: true }.
    const stack = {
  children: [
    {
      component: {
        name: 'RootComponent',
      },
    },
    {
      component: {
        name: 'SecondComponent',
      },
    },
  ],
};

  5. Use SplitView layout for master-detail interfaces

    master

    The SplitView layout implements a master-detail interface, similar to Apple's UISplitViewController. It is currently implemented only on iOS.

    It consists of two main parts:

    • master: The smaller screen or sidebar.
    • detail: The larger screen that flexes to fill the remaining space.

    You can define a SplitView within a layout object by providing master and detail keys, each containing a component configuration.

    {
  id: 'PROFILE_TAB',
  master: {
    component: {
      id: 'MASTER_SCREEN',
      name: 'MasterScreen'
    }
  },
  detail: {
    component: {
      id: 'DETAIL_SCREEN',
      name: 'DetailScreen'
    }
  }
}

  6. Understand the ViewController hierarchy on Android

    master

    On Android, react-native-navigation uses a pure View-based hierarchy rather than Fragments. All navigation controllers derive from an abstract ViewController.

    ViewController Structure

    • ViewController<T extends ViewGroup>: The base class. It manages view creation, lifecycle (onViewWillAppear, onViewDidAppear, onViewDisappear, destroy), and options application.

    ChildControllers

    These represent individual screens or components:

    • ComponentViewController: Renders React components via ReactView.
    • ExternalComponentViewController: Wraps native Android views.
    • ChildController: Adds presenter support to the hierarchy.

    ParentControllers (Containers)

    These manage multiple child controllers:

    • StackController: Handles push/pop navigation using an IdStack.
    • BottomTabsController: Uses AHBottomNavigation for tabbed navigation.
    • TopTabsController: Uses a ViewPager-based implementation for horizontal tabs.
    • SideMenuController: Uses DrawerLayout for side menus.
    • Navigator: The root controller that manages the main content, modals, and overlays.
    public abstract class ViewController<T extends ViewGroup> {
    protected abstract T createView();  // Subclasses create views

    public void onViewWillAppear() { }
    public void onViewDidAppear() { }
    public void onViewDisappear() { }

    public void mergeOptions(Options options) { }
    public void applyOptions(Options options) { }
    public boolean handleBack(CommandListener listener) { }
    public void destroy() { }
}

  7. Project folder structure

    master

    The repository is organized as follows:

    FolderDescription
    srcTypeScript sources and unit tests
    androidAndroid sources and unit tests
    iosiOS sources and unit tests
    libCompiled JavaScript and TypeScript definitions (generated by react-native-builder-bob)
    lib/module/index.jsThe entry point for import Navigation from 'react-native-navigation'
    playgroundThe playground app workspace. Contains its own src, android, ios, and package.json. All e2e tests run against this app.
    playground/e2edetox e2e tests on both Android and iOS
    integrationMisc JavaScript integration tests, proving integration with other libraries like redux
    scriptsAll build and test scripts
    autolinkAutolinking scripts for React Native CLI

  9. Understand the RNN iOS Architecture and Command Flow

    master

    React Native Navigation on iOS operates by receiving commands from JavaScript and executing them via native UIKit view controllers.

    Command Flow:

    1. Entry Point: Commands arrive via RNNBridgeModule (Legacy) or RNNTurboModule (New Architecture).
    2. Dispatcher: Both entry points delegate to RNNCommandsHandler, which validates commands and manages the layout lifecycle.
    3. Managers: The RNNCommandsHandler coordinates with specialized managers:
      • RNNLayoutManager: Tracks active view controllers.
      • RNNModalManager: Manages modal presentations.
      • RNNOverlayManager: Manages overlay windows.
    4. Execution: The command results in the creation or manipulation of view controllers (e.g., RNNStackController, RNNBottomTabsController) via the RNNViewControllerFactory.

  10. Understand the React Native Navigation architecture

    master

    React Native Navigation (RNN) provides 100% native platform navigation on both iOS and Android through a unified JavaScript API. It uses a layered architecture:

    1. JavaScript API Layer: The public Navigation object (e.g., push(), setRoot()) used by developers.
    2. Processing Pipeline: A series of internal steps including OptionsCrawler, LayoutProcessor, LayoutTreeParser, and OptionsProcessor that prepare the navigation request.
    3. TurboModule Bridge: Communicates with native code via RNNTurboModule (iOS) or NavigationTurboModule (Android).
    4. Native Layer: Executes the actual navigation using platform-specific controllers like UINavigationController (iOS) or ViewControllers (Android).

    This architecture ensures that while you write JavaScript, the actual UI transitions and view hierarchies are managed by the native OS for maximum performance and feel.

  11. Use the Bottom Tabs layout

    master

    The BOTTOM_TABS_LAYOUT is a container view that manages a radio-style selection interface. Selecting a tab determines which child view controller is displayed. You can define children as direct components or as nested stacks.

    {
  id: 'BOTTOM_TABS_LAYOUT',
  children: [
    {
      component: {
        id: 'HOME_SCREEN',
        name: 'HomeScreen'
      }
    },
    {
      stack: {
        id: 'PROFILE_TAB',
        children: [
          {
            component: {
              id: 'PROFILE_SCREEN',
              name: 'ProfileScreen'
            }
          }
        ]
      }
    }
  ]
}