tessl/npm-react-navigation--native

React Native integration for React Navigation providing navigation containers, deep linking, and platform-specific navigation behaviors.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@react-navigation/native

Name: tessl/npm-react-navigation--native
Author: tessl

@react-navigation/native provides React Native integration for React Navigation, serving as the foundational bridge between React Navigation's core navigation logic and React Native's platform-specific implementations. It handles navigation containers, deep linking, theming, and platform-specific behaviors across iOS and Android.

Package Information

Package Name: @react-navigation/native
Package Type: npm
Language: TypeScript
Installation: npm install @react-navigation/native

Core Imports

import { NavigationContainer, Link, createStaticNavigation } from "@react-navigation/native";

For CommonJS:

const { NavigationContainer, Link, createStaticNavigation } = require("@react-navigation/native");

Theme imports:

import { DefaultTheme, DarkTheme } from "@react-navigation/native";

Hook imports:

import { 
  useLinkProps, 
  useLinkTo, 
  useLinkBuilder, 
  useScrollToTop, 
  useLocale 
} from "@react-navigation/native";

Basic Usage

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Architecture

@react-navigation/native is built around several key components:

Navigation Container: The root component that manages navigation state and provides context
Deep Linking System: URL-based navigation with configurable path matching and prefixes
Theme System: Built-in light/dark themes with full customization support
Platform Integration: Native back button handling, document title management, and platform-specific behaviors
Hook System: React hooks for navigation, linking, and scroll management
Server Rendering: SSR support for web deployments via ServerContainer

Capabilities

Navigation Container

The root navigation container that manages navigation state and provides linking, theming, and platform integration.

function NavigationContainer<ParamList extends {} = ReactNavigation.RootParamList>(
  props: NavigationContainerProps & {
    direction?: LocaleDirection;
    linking?: LinkingOptions<ParamList>;
    fallback?: React.ReactNode;
    documentTitle?: DocumentTitleOptions;
    children: React.ReactNode;
  }
): React.ReactElement;

type LocaleDirection = 'ltr' | 'rtl';

Navigation Container

Deep Linking

Comprehensive URL-based navigation system with path matching, prefixes, and state synchronization.

interface LinkingOptions<ParamList extends {}> {
  enabled?: boolean;
  prefixes: string[];
  filter?: (url: string) => boolean;
  config?: {
    path?: string;
    screens: PathConfigMap<ParamList>;
    initialRouteName?: keyof ParamList;
  };
  getInitialURL?: () => string | null | undefined | Promise<string | null | undefined>;
  subscribe?: (listener: (url: string) => void) => undefined | void | (() => void);
  getStateFromPath?: typeof getStateFromPath;
  getPathFromState?: typeof getPathFromState;
  getActionFromState?: typeof getActionFromState;
}

Deep Linking

Link Components

React components for rendering navigational links with proper web semantics and native behavior.

function Link<ParamList extends ReactNavigation.RootParamList>(
  props: LinkProps<ParamList> & Omit<TextProps, 'disabled'> & {
    target?: string;
    onPress?: (e: React.MouseEvent<HTMLAnchorElement> | GestureResponderEvent) => void;
    disabled?: boolean | null;
    children: React.ReactNode;
  }
): React.ReactElement;

type LinkProps<ParamList, RouteName extends keyof ParamList = keyof ParamList> =
  | ({ href?: string; action?: NavigationAction; } & 
     (undefined extends ParamList[RouteName]
       ? { screen: RouteName; params?: ParamList[RouteName] }
       : { screen: RouteName; params: ParamList[RouteName] }))
  | { href?: string; action: NavigationAction; screen?: undefined; params?: undefined; };

Link Components

Navigation Hooks

React hooks for programmatic navigation, link building, and navigation state management.

function useLinkTo(): (href: string) => void;

function useLinkProps<ParamList extends ReactNavigation.RootParamList>(
  props: LinkProps<ParamList>
): { href?: string; role: 'link'; onPress: (e?: any) => void; };

function useLinkBuilder(): {
  buildHref: (name: string, params?: object) => string | undefined;
  buildAction: (href: string) => NavigationAction;
};

function useScrollToTop(ref: React.RefObject<ScrollableWrapper>): void;

function useLocale(): { direction: LocaleDirection };

Navigation Hooks

Static Navigation

Type-safe navigation configuration system that generates navigation components from static definitions.

function createStaticNavigation(
  tree: StaticNavigation<any, any, any>
): React.ForwardRefExoticComponent<
  StaticNavigationProps & React.RefAttributes<NavigationContainerRef<ParamListBase>>
>;

type StaticNavigationProps = Omit<
  React.ComponentProps<typeof NavigationContainer>,
  'linking' | 'children'
> & {
  linking?: Omit<LinkingOptions<ParamListBase>, 'config' | 'enabled'> & {
    enabled?: 'auto' | true | false;
    config?: Omit<NonNullable<LinkingOptions<ParamListBase>['config']>, 'screens'>;
  };
};

Static Navigation

Theming

Built-in theme system with light and dark variants, plus full customization support.

const DefaultTheme: Theme;
const DarkTheme: Theme;

interface Theme {
  dark: boolean;
  colors: {
    primary: string;
    background: string;
    card: string;
    text: string;
    border: string;
    notification: string;
  };
  fonts: {
    regular: FontStyle;
    medium: FontStyle;
    bold: FontStyle;
    heavy: FontStyle;
  };
}

interface FontStyle {
  fontFamily: string;
  fontWeight: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
}

Theming

Server-Side Rendering

Components and utilities for server-side rendering support in web applications.

function ServerContainer(
  props: {
    location: { pathname: string; search?: string; hash?: string; };
    children: React.ReactNode;
  } & React.RefAttributes<ServerContainerRef>
): React.ReactElement;

interface ServerContainerRef {
  getCurrentOptions(): Record<string, any> | undefined;
}

Server-Side Rendering

Types

interface DocumentTitleOptions {
  enabled?: boolean;
  formatter?: (
    options: Record<string, any> | undefined,
    route: Route<string> | undefined
  ) => string;
}

type ScrollableWrapper =
  | { scrollToTop(): void }
  | { scrollTo(options: { x?: number; y?: number; animated?: boolean }): void }
  | { scrollToOffset(options: { offset: number; animated?: boolean }): void }
  | { scrollResponderScrollTo(options: { x?: number; y?: number; animated?: boolean }): void }
  | { getScrollResponder(): React.ReactNode | ScrollView }
  | { getNode(): ScrollableWrapper }
  | null;