Navigator Creation

/**
 * Creates a native stack navigator with type safety for parameter lists
 * @param config - Optional static configuration for the navigator
 * @returns TypedNavigator factory function
 */
function createNativeStackNavigator<
  const ParamList extends ParamListBase,
  const NavigatorID extends string | undefined = undefined,
  const TypeBag extends NavigatorTypeBagBase = {
    ParamList: ParamList;
    NavigatorID: NavigatorID;
    State: StackNavigationState<ParamList>;
    ScreenOptions: NativeStackNavigationOptions;
    EventMap: NativeStackNavigationEventMap;
    NavigationList: {
      [RouteName in keyof ParamList]: NativeStackNavigationProp<
        ParamList,
        RouteName,
        NavigatorID
      >;
    };
    Navigator: typeof NativeStackNavigator;
  },
  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>
>(config?: Config): TypedNavigator<TypeBag, Config>;

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

// Define parameter list type for type safety
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

// Create the navigator
const Stack = createNativeStackNavigator<RootStackParamList>();

// Use in component
function App() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen 
        name="Profile" 
        component={ProfileScreen}
        options={({ route }) => ({ 
          title: `User ${route.params.userId}` 
        })}
      />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

/**
 * Native Stack Navigator component props
 */
interface NativeStackNavigatorProps extends DefaultNavigatorOptions<
  ParamListBase,
  string | undefined,
  StackNavigationState<ParamListBase>,
  NativeStackNavigationOptions,
  NativeStackNavigationEventMap,
  NativeStackNavigationProp<ParamListBase>
>, StackRouterOptions, NativeStackNavigationConfig {
  /**
   * Navigator ID for identifying this navigator
   */
  id?: string;
  /**
   * Initial route name to display
   */
  initialRouteName?: string;
  /**
   * Child Screen components
   */
  children: React.ReactNode;
  /**
   * Screen options applied to all screens
   */
  screenOptions?: NativeStackNavigationOptions | ((props: {
    route: RouteProp<ParamListBase>;
    navigation: any;
  }) => NativeStackNavigationOptions);
  /**
   * Screen listeners applied to all screens
   */
  screenListeners?: object;
}

// Basic navigator with default options
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>

// Navigator with global screen options
<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: '#6a51ae' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  }}
>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>

// Navigator with dynamic screen options
<Stack.Navigator
  screenOptions={({ route, navigation }) => ({
    headerTitle: route.name,
    headerLeft: () => (
      <Button onPress={() => navigation.goBack()} title="Back" />
    ),
  })}
>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>

/**
 * Screen component for defining individual screens in the stack
 */
interface ScreenProps {
  /**
   * Screen name - must match a key in the ParamList type
   */
  name: string;
  /**
   * React component to render for this screen
   */
  component?: React.ComponentType<any>;
  /**
   * Function that returns a React element to render
   */
  children?: (props: any) => React.ReactNode;
  /**
   * Screen-specific navigation options
   */
  options?: NativeStackNavigationOptions | ((props: {
    route: RouteProp<ParamListBase>;
    navigation: any;
  }) => NativeStackNavigationOptions);
  /**
   * Screen-specific event listeners
   */
  listeners?: object;
  /**
   * Initial parameters for the screen
   */
  initialParams?: object;
}

// Basic screen definition
<Stack.Screen name="Home" component={HomeScreen} />

// Screen with static options
<Stack.Screen 
  name="Details" 
  component={DetailsScreen}
  options={{
    title: 'Details',
    headerBackTitle: 'Back',
  }}
/>

// Screen with dynamic options
<Stack.Screen 
  name="Profile" 
  component={ProfileScreen}
  options={({ route }) => ({
    title: route.params?.name || 'Profile',
  })}
/>

// Screen with children function
<Stack.Screen name="Modal">
  {(props) => <ModalScreen {...props} customProp="value" />}
</Stack.Screen>

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

interface NavigatorTypeBagBase {
  ParamList: ParamListBase;
  NavigatorID: string | undefined;
  State: NavigationState;
  ScreenOptions: object;
  EventMap: EventMapBase;
  NavigationList: Record<string, any>;
  Navigator: React.ComponentType<any>;
}

interface StaticConfig<TypeBag extends NavigatorTypeBagBase> {
  name?: string;
}

interface TypedNavigator<
  TypeBag extends NavigatorTypeBagBase,
  Config extends StaticConfig<TypeBag>
> {
  Navigator: React.ComponentType<any>;
  Screen: React.ComponentType<any>;
}