or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdnative-routing.mdnavigation-hooks.mdreact-router-components.mdreact-router-hooks.mdreact-router-utilities.mdsearch-parameters.md
tile.json

tessl/npm-react-router-native

Declarative routing for React Native applications with native-specific components and deep linking support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-router-native@6.30.x

To install, run

npx @tessl/cli install tessl/npm-react-router-native@6.30.0

index.mddocs/

React Router Native

React Router Native provides declarative routing for React Native applications. It extends React Router with native-specific components and hooks, enabling URL-based navigation patterns in mobile apps with support for deep linking, hardware back button integration, and touch-based navigation.

Package Information

  • Package Name: react-router-native
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-router-native react-router react react-native @ungap/url-search-params
  • Peer Dependencies: React >=16.8, React Native >=0.44

Core Imports

import { NativeRouter, Link, Routes, Route } from "react-router-native";
import { useSearchParams, useDeepLinking, useLinkPressHandler } from "react-router-native";

For CommonJS:

const { NativeRouter, Link, Routes, Route } = require("react-router-native");

Basic Usage

import React from "react";
import { View, Text } from "react-native";
import { NativeRouter, Routes, Route, Link } from "react-router-native";

function App() {
  return (
    <NativeRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </NativeRouter>
  );
}

function Home() {
  return (
    <View>
      <Text>Home Screen</Text>
      <Link to="/about">
        <Text>Go to About</Text>
      </Link>
    </View>
  );
}

function About() {
  return (
    <View>
      <Text>About Screen</Text>
      <Link to="/">
        <Text>Go to Home</Text>
      </Link>
    </View>
  );
}

Architecture

React Router Native is built around several key components:

  • Native Router: NativeRouter component provides memory-based routing for React Native apps
  • Touch Navigation: Link component built on TouchableHighlight for native touch interactions
  • Deep Linking: Hooks for handling incoming URLs and app launch navigation
  • React Router Integration: Full re-export of React Router's components, hooks, and utilities
  • Mobile Optimizations: Native-specific adaptations for hardware back button and URL search parameters

Capabilities

Core Native Routing

Essential React Native routing components including the main router and navigation links optimized for mobile touch interactions.

interface NativeRouterProps extends MemoryRouterProps {}
function NativeRouter(props: NativeRouterProps): JSX.Element;

interface LinkProps extends TouchableHighlightProps {
  children?: React.ReactNode;
  onPress?: (event: GestureResponderEvent) => void;
  relative?: RelativeRoutingType;
  replace?: boolean;
  state?: any;
  to: To;
}
function Link(props: LinkProps): JSX.Element;

Native Routing Components

Navigation Hooks

Native-specific hooks for custom navigation behavior, hardware integration, and deep linking support.

function useLinkPressHandler(
  to: To,
  options?: {
    replace?: boolean;
    state?: any;
    relative?: RelativeRoutingType;
  }
): (event: GestureResponderEvent) => void;

function useDeepLinking(): void;
function useHardwareBackButton(): void;
function useAndroidBackButton(): void;

Navigation Hooks

URL Search Parameters

Enhanced URLSearchParams functionality adapted for React Native applications with mobile-optimized parameter handling.

function useSearchParams(
  defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams];

function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;

type SetURLSearchParams = (
  nextInit?:
    | URLSearchParamsInit
    | ((prev: URLSearchParams) => URLSearchParamsInit),
  navigateOpts?: NavigateOptions
) => void;

type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams;

Search Parameters

React Router Components

Complete re-export of React Router components for building declarative route structures in React Native applications.

function MemoryRouter(props: MemoryRouterProps): JSX.Element;
function Routes(props: RoutesProps): JSX.Element;
function Route(props: RouteProps): JSX.Element;
function Navigate(props: NavigateProps): JSX.Element;
function Outlet(props: OutletProps): JSX.Element;

React Router Components

React Router Hooks

Complete re-export of React Router hooks for accessing navigation state, route data, and programmatic navigation.

function useNavigate(): NavigateFunction;
function useLocation(): Location;
function useParams(): Params;
function useNavigationType(): NavigationType;
function useMatch(pattern: PathPattern): PathMatch | null;

React Router Hooks

React Router Utilities

Complete re-export of React Router utility functions for path manipulation, route creation, and data handling.

function createMemoryRouter(routes: RouteObject[], opts?: RouterOptions): Router;
function createPath(partialPath: Partial<Path>): string;
function generatePath(pattern: string, params?: Params): string;
function matchPath(pattern: PathPattern, pathname: string): PathMatch | null;

React Router Utilities

Types

Core Types

interface NativeRouterProps extends MemoryRouterProps {}

interface LinkProps extends TouchableHighlightProps {
  children?: React.ReactNode;
  onPress?: (event: GestureResponderEvent) => void;
  relative?: RelativeRoutingType;
  replace?: boolean;
  state?: any;
  to: To;
}

type ParamKeyValuePair = [string, string];

type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams;

type SetURLSearchParams = (
  nextInit?:
    | URLSearchParamsInit
    | ((prev: URLSearchParams) => URLSearchParamsInit),
  navigateOpts?: NavigateOptions
) => void;

Re-exported Types

All React Router types are re-exported, including:

  • Route Types: RouteObject, IndexRouteObject, NonIndexRouteObject, RouteMatch
  • Navigation Types: NavigateFunction, NavigateOptions, NavigationType, Location
  • Component Props: RouteProps, RoutesProps, OutletProps, NavigateProps
  • Utility Types: To, Params, PathMatch, PathPattern, RelativeRoutingType
  • Data Types: LoaderFunction, ActionFunction, Fetcher, ErrorResponse

See React Router documentation for complete type definitions.