or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

containers-and-contexts.mdhooks.mdindex.mdstatic-navigation.mdtypes.mdutilities.md
tile.json

tessl/npm-react-navigation--core

Core utilities for building navigators in React Native applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-navigation/core@7.12.x

To install, run

npx @tessl/cli install tessl/npm-react-navigation--core@7.12.0

index.mddocs/

React Navigation Core

React Navigation Core provides the foundational utilities and building blocks for creating custom navigation components in React Native applications. It offers fundamental hooks like useNavigationBuilder for building custom navigators, core navigation context providers, and essential utilities for managing navigation state and lifecycle.

Package Information

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

Core Imports

import {
  BaseNavigationContainer,
  useNavigation,
  useRoute,
  useFocusEffect,
  useIsFocused,
  useNavigationBuilder,
  useNavigationState,
  useNavigationContainerRef,
  usePreventRemove,
  useTheme,
  createNavigationContainerRef,
  createNavigatorFactory,
  getPathFromState,
  getStateFromPath,
  getActionFromState,
  findFocusedRoute,
  NavigationContext,
  ThemeProvider,
  NavigationIndependentTree,
  PreventRemoveProvider
} from "@react-navigation/core";

For CommonJS:

const {
  BaseNavigationContainer,
  useNavigation,
  useRoute,
  useFocusEffect,
  useIsFocused,
  useNavigationBuilder,
  createNavigationContainerRef,
  getPathFromState,
  getStateFromPath
} = require("@react-navigation/core");

Basic Usage

import React from 'react';
import {
  BaseNavigationContainer,
  useNavigation,
  useRoute,
  useFocusEffect
} from "@react-navigation/core";

// Basic navigation container setup
function App() {
  return (
    <BaseNavigationContainer>
      <MyNavigator />
    </BaseNavigationContainer>
  );
}

// Using navigation and route hooks
function MyScreen() {
  const navigation = useNavigation();
  const route = useRoute();

  // Focus effect for screen lifecycle
  useFocusEffect(
    React.useCallback(() => {
      console.log('Screen focused');
      return () => {
        console.log('Screen unfocused');
      };
    }, [])
  );

  return (
    <View>
      <Text>Current route: {route.name}</Text>
      <Button
        title="Go Back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

Architecture

React Navigation Core is built around several key architectural components:

  • Hook System: Core hooks (useNavigation, useRoute, useFocusEffect) provide navigation functionality throughout the component tree
  • Context Providers: React contexts distribute navigation state, theme, and route information across components
  • Navigation Container: BaseNavigationContainer manages the root navigation state and provides the foundation for all navigation
  • Builder Pattern: useNavigationBuilder enables creation of custom navigators with consistent APIs
  • State Management: Navigation state is managed centrally with utilities for serialization and deep linking
  • Event System: Navigation events (focus, blur, state changes) enable reactive programming patterns

Capabilities

Navigation Hooks

Core hooks for accessing navigation functionality from anywhere in the component tree, including navigation methods, route information, screen lifecycle, and navigator building.

function useNavigation<T = NavigationProp<ParamListBase>>(): T;
function useRoute<T = RouteProp<ParamListBase>>(): T;
function useIsFocused(): boolean;
function useFocusEffect(effect: () => undefined | void | (() => void)): void;
function useNavigationBuilder<State, RouterOptions, ActionHelpers, ScreenOptions, EventMap>(
  router: RouterFactory<State, NavigationAction, RouterOptions>,
  options: DefaultNavigatorOptions<ParamListBase, string, State, ScreenOptions, EventMap, any> & RouterOptions
): NavigationBuilderResult<State, RouterOptions, ActionHelpers, ScreenOptions, EventMap>;
function useNavigationState<ParamList extends ParamListBase, T>(
  selector: (state: NavigationState<ParamList>) => T
): T;
function useNavigationContainerRef<ParamList extends ParamListBase>(): NavigationContainerRef<ParamList>;
function usePreventRemove(preventRemove: boolean, callback: (data: { action: NavigationAction }) => void): void;
function useTheme(): ReactNavigation.Theme;

Navigation Hooks

Container and Context Components

Navigation container and context providers that manage navigation state and distribute it throughout the app component tree.

function BaseNavigationContainer(props: NavigationContainerProps): React.JSX.Element;

interface NavigationContainerProps {
  initialState?: InitialState;
  onStateChange?: (state: NavigationState | undefined) => void;
  onReady?: () => void;
  theme?: ReactNavigation.Theme;
  children: React.ReactNode;
}

Containers and Contexts

State and Path Utilities

Utilities for converting navigation state to URL paths and vice versa, enabling deep linking and URL generation.

function getPathFromState(
  state: NavigationState | PartialState<NavigationState>,
  options?: PathConfigOptions
): string;

function getStateFromPath(
  path: string,
  options?: PathConfigOptions
): PartialState<NavigationState> | undefined;

State and Path Utilities

Static Navigation

Utilities for creating navigation structures from static configuration objects, enabling declarative navigation setup.

function createComponentForStaticNavigation<T extends StaticNavigation<any, any, any>>(
  tree: T,
  displayName?: string
): React.ComponentType<{}>;

function createPathConfigForStaticNavigation(
  tree: StaticNavigation<any, any, any>,
  options?: { initialRouteName?: string },
  auto?: boolean
): any;

Static Navigation

Navigator Factory Functions

Factory functions for creating navigation containers and navigator components with proper typing and lifecycle management.

function createNavigationContainerRef<ParamList extends ParamListBase>(): React.RefObject<NavigationContainerRef<ParamList>>;

function createNavigatorFactory<State, ScreenOptions, EventMap, Navigation>(
  Navigator: React.ComponentType<any>
): NavigatorFactory<State, ScreenOptions, EventMap, Navigation>;

Additional Utilities

Additional utility functions for navigation state manipulation, route finding, and validation.

function getActionFromState(
  state: NavigationState | PartialState<NavigationState>,
  options?: PathConfigOptions
): NavigationAction | undefined;

function findFocusedRoute(
  state: NavigationState | PartialState<NavigationState>
): NavigationRoute<ParamListBase> | undefined;

function getFocusedRouteNameFromRoute(
  route: NavigationRoute<ParamListBase>
): string | undefined;

function validatePathConfig(
  config: PathConfigMap<ParamListBase>,
  root?: boolean
): void;

Core Types and Interfaces

Essential TypeScript interfaces and types for navigation props, route objects, and configuration.

interface NavigationProp<
  ParamList extends ParamListBase = ParamListBase,
  RouteName extends keyof ParamList = keyof ParamList
> {
  navigate<RouteName extends keyof ParamList>(
    name: RouteName,
    params?: ParamList[RouteName]
  ): void;
  goBack(): void;
  dispatch(action: NavigationAction): void;
  setOptions(options: Partial<ScreenOptions>): void;
  isFocused(): boolean;
  canGoBack(): boolean;
}

interface RouteProp<
  ParamList extends ParamListBase = ParamListBase,
  RouteName extends keyof ParamList = keyof ParamList
> {
  key: string;
  name: RouteName;
  params: ParamList[RouteName];
}

Core Types and Interfaces

Router Actions and Types

Re-exported functionality from @react-navigation/routers including action creators and router implementations.

namespace CommonActions {
  function navigate(name: string, params?: object): NavigationAction;
  function goBack(): NavigationAction;
  function reset(state: PartialState<NavigationState>): NavigationAction;
  function setParams(params: object): NavigationAction;
}

namespace StackActions {
  function push(name: string, params?: object): NavigationAction;
  function pop(count?: number): NavigationAction;
  function popToTop(): NavigationAction;
  function replace(name: string, params?: object): NavigationAction;
}

namespace TabActions {
  function jumpTo(name: string, params?: object): NavigationAction;
}

namespace DrawerActions {
  function openDrawer(): NavigationAction;
  function closeDrawer(): NavigationAction;
  function toggleDrawer(): NavigationAction;
}

Core Types and Interfaces