or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdnavigation-props-hooks.mdnavigator-creation.mdscreen-configuration.md
tile.json

tessl/npm-react-navigation--native-stack

Native stack navigator for React Native applications that uses react-native-screens under the hood to deliver optimal performance by leveraging native navigation primitives.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-navigation/native-stack@7.3.x

To install, run

npx @tessl/cli install tessl/npm-react-navigation--native-stack@7.3.0

index.mddocs/

React Navigation Native Stack

React Navigation Native Stack provides a native stack navigator for React Native applications that uses react-native-screens under the hood to deliver optimal performance by leveraging native navigation primitives. It offers screen management capabilities with smooth transitions, gesture-based navigation, and proper integration with the native navigation stack on both iOS and Android platforms.

Package Information

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

Core Imports

import { 
  createNativeStackNavigator, 
  NativeStackView, 
  useAnimatedHeaderHeight,
  type NativeStackHeaderLeftProps,
  type NativeStackHeaderProps,
  type NativeStackHeaderRightProps,
  type NativeStackNavigationEventMap,
  type NativeStackNavigationOptions,
  type NativeStackNavigationProp,
  type NativeStackNavigatorProps,
  type NativeStackOptionsArgs,
  type NativeStackScreenProps,
  type NativeStackDescriptor,
  type NativeStackDescriptorMap
} from "@react-navigation/native-stack";

For CommonJS:

const { 
  createNativeStackNavigator, 
  NativeStackView, 
  useAnimatedHeaderHeight 
} = require("@react-navigation/native-stack");

Basic Usage

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

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

Architecture

React Navigation Native Stack is built around several key components:

  • Native Stack Navigator: Core navigation component using native platform primitives
  • Screen Management: Handles screen lifecycle, transitions, and gesture interactions
  • Header System: Flexible header configuration with platform-specific adaptations
  • Type Safety: Full TypeScript integration with parameter list type checking
  • Performance Optimization: Leverages react-native-screens for native performance

Capabilities

Navigator Creation

Core functionality for creating and configuring native stack navigators with type safety.

function createNativeStackNavigator<
  ParamList extends ParamListBase,
  NavigatorID extends string | undefined = undefined
>(config?: StaticConfig): TypedNavigator<NavigatorTypeBag, StaticConfig>;

Navigator Creation

Native Stack View

Low-level view component that renders the native stack interface, typically used internally by the navigator but can be customized for advanced use cases.

function NativeStackView(props: {
  state: StackNavigationState<ParamListBase>;
  navigation: NativeStackNavigationHelpers;
  descriptors: NativeStackDescriptorMap;
  describe: (route: RouteProp<ParamListBase>, placeholder: boolean) => NativeStackDescriptor;
}): React.ReactElement;

Screen Configuration

Comprehensive screen options for headers, animations, presentations, and platform-specific behaviors.

interface NativeStackNavigationOptions {
  title?: string;
  headerShown?: boolean;
  presentation?: 'card' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet';
  animation?: 'default' | 'fade' | 'fade_from_bottom' | 'flip' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left' | 'ios_from_right' | 'ios_from_left' | 'none';
  // ... extensive additional options
}

Screen Configuration

Navigation Props and Hooks

Navigation properties, screen props, and utility hooks for accessing navigation state and header information.

type NativeStackScreenProps<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = string
> = {
  navigation: NativeStackNavigationProp<ParamList, RouteName>;
  route: RouteProp<ParamList, RouteName>;
};

function useAnimatedHeaderHeight(): Animated.AnimatedInterpolation<number>;

Navigation Props and Hooks

Core Types

type ParamListBase = Record<string, object | undefined>;

interface NativeStackNavigationEventMap {
  transitionStart: { data: { closing: boolean } };
  transitionEnd: { data: { closing: boolean } };
  gestureCancel: { data: undefined };
  sheetDetentChange: { data: { index: number; stable: boolean } };
}

type NativeStackNavigationProp<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = string,
  NavigatorID extends string | undefined = undefined
> = NavigationProp<
  ParamList,
  RouteName,
  NavigatorID,
  StackNavigationState<ParamList>,
  NativeStackNavigationOptions,
  NativeStackNavigationEventMap
> & StackActionHelpers<ParamList>;

interface NativeStackHeaderProps {
  back?: { title: string | undefined; href: string | undefined };
  options: NativeStackNavigationOptions;
  route: Route<string>;
  navigation: NativeStackNavigationProp<ParamListBase>;
}

interface NativeStackHeaderLeftProps {
  tintColor?: string;
  canGoBack?: boolean;
  label?: string;
  href?: string;
}

interface NativeStackHeaderRightProps {
  tintColor?: string;
  canGoBack?: boolean;
}

type NativeStackOptionsArgs<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = keyof ParamList,
  NavigatorID extends string | undefined = undefined
> = NativeStackScreenProps<ParamList, RouteName, NavigatorID> & {
  theme: Theme;
};

interface NativeStackNavigatorProps extends DefaultNavigatorOptions<
  ParamListBase,
  string | undefined,
  StackNavigationState<ParamListBase>,
  NativeStackNavigationOptions,
  NativeStackNavigationEventMap,
  NativeStackNavigationProp<ParamListBase>
>, StackRouterOptions, NativeStackNavigationConfig {}

type NativeStackDescriptor = Descriptor<
  NativeStackNavigationOptions,
  NativeStackNavigationProp<ParamListBase>,
  RouteProp<ParamListBase>
>;

type NativeStackDescriptorMap = {
  [key: string]: NativeStackDescriptor;
};

type NativeStackNavigationConfig = {};