tessl/npm-react-navigation--stack

Stack navigator component for iOS and Android with animated transitions and gestures

—

Pending

Overview

Eval results

Files

Stack Navigation

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

Core navigation functionality providing the primary interface for creating and configuring stack-based navigation in React Native applications.

Capabilities

createStackNavigator

Factory function that creates a stack navigator with type-safe parameter lists and screen configuration.

/**
 * Creates a stack navigator factory with TypeScript support
 * @returns Object containing Navigator, Screen, and Group components
 */
function createStackNavigator<ParamList extends ParamListBase = ParamListBase>(): {
  Navigator: React.ComponentType<StackNavigatorProps<ParamList>>;
  Screen: React.ComponentType<StackScreenConfig<ParamList>>;
  Group: React.ComponentType<StackGroupConfig<ParamList>>;
};

interface StackNavigatorProps<ParamList extends ParamListBase> {
  id?: string;
  initialRouteName?: keyof ParamList;
  screenOptions?: StackNavigationOptions | ((props: {
    route: RouteProp<ParamList>;
    navigation: StackNavigationProp<ParamList>;
  }) => StackNavigationOptions);
  children: React.ReactNode;
  detachInactiveScreens?: boolean;
}

interface StackScreenConfig<ParamList extends ParamListBase> {
  name: keyof ParamList;
  component?: React.ComponentType<any>;
  getComponent?: () => React.ComponentType<any>;
  options?: StackNavigationOptions | ((props: {
    route: RouteProp<ParamList>;
    navigation: StackNavigationProp<ParamList>;
  }) => StackNavigationOptions);
  initialParams?: ParamList[keyof ParamList];
  getId?: ({ params }: { params: ParamList[keyof ParamList] }) => string;
  listeners?: StackNavigationEventMap | ((props: {
    route: RouteProp<ParamList>;
    navigation: StackNavigationProp<ParamList>;
  }) => StackNavigationEventMap);
}

interface StackGroupConfig<ParamList extends ParamListBase> {
  screenOptions?: StackNavigationOptions | ((props: {
    route: RouteProp<ParamList>;
    navigation: StackNavigationProp<ParamList>;
  }) => StackNavigationOptions);
  children: React.ReactNode;
}

Usage Examples:

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

// Define parameter types
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: { section?: string };
};

const Stack = createStackNavigator<RootStackParamList>();

// Basic navigator setup
function App() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerStyle: { backgroundColor: '#f4511e' },
        headerTintColor: '#fff',
        headerTitleStyle: { fontWeight: 'bold' },
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen 
        name="Profile" 
        component={ProfileScreen}
        options={{ title: 'User Profile' }}
      />
      <Stack.Screen 
        name="Settings" 
        component={SettingsScreen}
        options={({ route, navigation }) => ({
          title: route.params?.section ? `${route.params.section} Settings` : 'Settings',
        })}
      />
    </Stack.Navigator>
  );
}

// Group configuration
function AuthenticatedStack() {
  return (
    <Stack.Navigator>
      <Stack.Group screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Feed" component={FeedScreen} />
      </Stack.Group>
      <Stack.Group screenOptions={{ presentation: 'modal' }}>
        <Stack.Screen name="Settings" component={SettingsScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

StackView Component

Internal view component that renders the stack navigation interface (exported for advanced customization).

/**
 * Main stack view component that renders navigation interface
 * @param props - Stack view configuration props
 * @returns React component rendering the stack navigation
 */
interface StackViewProps {
  state: StackNavigationState<ParamListBase>;
  navigation: StackNavigationHelpers;
  descriptors: StackDescriptorMap;
  detachInactiveScreens?: boolean;
}

const StackView: React.ComponentType<StackViewProps>;

Header Component

Customizable header component for stack screens with platform-specific styling and behavior.

/**
 * Header component for stack screens with customizable styling
 * @param props - Header configuration props
 * @returns React component rendering the navigation header
 */
interface StackHeaderProps {
  layout: Layout;
  back?: {
    title: string;
  };
  progress: SceneProgress;
  options: StackNavigationOptions;
  route: Route<string>;
  navigation: StackNavigationProp<ParamListBase>;
  styleInterpolator: StackHeaderStyleInterpolator;
}

const Header: React.ComponentType<StackHeaderProps>;

interface Layout {
  width: number;
  height: number;
}

interface SceneProgress {
  current: Animated.AnimatedInterpolation<number>;
  next?: Animated.AnimatedInterpolation<number>;
  previous?: Animated.AnimatedInterpolation<number>;
}

Usage Examples:

import { Header } from '@react-navigation/stack';

// Custom header usage in screen options
function CustomHeaderScreen() {
  return (
    <Stack.Screen
      name="Custom"
      component={MyComponent}
      options={{
        header: (props) => (
          <Header
            {...props}
            options={{
              ...props.options,
              headerStyle: { backgroundColor: 'red' },
              headerTitle: 'Custom Header',
            }}
          />
        ),
      }}
    />
  );
}

Navigation Methods

Stack navigation provides standard navigation methods plus stack-specific actions:

interface StackNavigationHelpers {
  // Standard navigation methods
  navigate<RouteName extends keyof ParamList>(
    route: RouteName,
    params?: ParamList[RouteName]
  ): void;
  push<RouteName extends keyof ParamList>(
    route: RouteName,
    params?: ParamList[RouteName]
  ): void;
  pop(count?: number): void;
  popToTop(): void;
  replace<RouteName extends keyof ParamList>(
    route: RouteName,
    params?: ParamList[RouteName]
  ): void;
  goBack(): void;
  
  // State queries
  canGoBack(): boolean;
  isFocused(): boolean;
  
  // Event handling
  addListener(type: keyof StackNavigationEventMap, callback: Function): () => void;
}

Usage Examples:

function MyScreen({ navigation }: StackScreenProps<ParamList, 'MyScreen'>) {
  const handlePress = () => {
    // Push new screen onto stack
    navigation.push('Details', { id: 123 });
    
    // Pop current screen
    navigation.pop();
    
    // Pop to top of stack
    navigation.popToTop();
    
    // Replace current screen
    navigation.replace('NewScreen', { data: 'example' });
  };

  // Listen to navigation events
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('transitionEnd', (e) => {
      console.log('Transition ended:', e.data.closing);
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <View>
      <Button title="Navigate" onPress={handlePress} />
    </View>
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-react-navigation--stack

docs

animation-utilities.md

card-animations.md

header-animations.md

index.md

transition-presets.md

transition-specs.md

tile.json

tessl/npm-react-navigation--stack