CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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 = {};
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-navigation/native-stack@7.3.x
Publish Source
CLI
Badge
tessl/npm-react-navigation--native-stack badge