Navigator Creation

/**
 * Creates a bottom tab navigator with full TypeScript support.
 * @param config Optional static configuration for the navigator
 * @returns TypedNavigator with Screen and Navigator components
 */
function createBottomTabNavigator<
  const ParamList extends ParamListBase,
  const NavigatorID extends string | undefined = undefined,
  const TypeBag extends NavigatorTypeBagBase = {
    ParamList: ParamList;
    NavigatorID: NavigatorID;
    State: TabNavigationState<ParamList>;
    ScreenOptions: BottomTabNavigationOptions;
    EventMap: BottomTabNavigationEventMap;
    NavigationList: {
      [RouteName in keyof ParamList]: BottomTabNavigationProp<
        ParamList,
        RouteName,
        NavigatorID
      >;
    };
    Navigator: typeof BottomTabNavigator;
  },
  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>
>(config?: Config): TypedNavigator<TypeBag, Config>;

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

// Basic navigator
const Tab = createBottomTabNavigator();

// Typed navigator with param list
type TabParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

const TypedTab = createBottomTabNavigator<TabParamList>();

// Navigator with ID for multiple navigators
const MainTab = createBottomTabNavigator<TabParamList, "MainTabs">();

interface TypedNavigator<TypeBag, Config> {
  Screen: React.ComponentType<BottomTabScreenConfig<TypeBag>>;
  Navigator: React.ComponentType<BottomTabNavigatorProps>;
  Group: React.ComponentType<GroupConfig>;
}

interface BottomTabScreenConfig<TypeBag> {
  name: keyof TypeBag['ParamList'];
  component?: React.ComponentType<any>;
  getComponent?: () => React.ComponentType<any>;
  options?: BottomTabNavigationOptions | ((props: BottomTabOptionsArgs) => BottomTabNavigationOptions);
  initialParams?: TypeBag['ParamList'][keyof TypeBag['ParamList']];
  getId?: ({ params }: { params: any }) => string;
  listeners?: BottomTabNavigationListeners;
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator 
        screenOptions={{
          tabBarActiveTintColor: '#e91e63',
          tabBarInactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen 
          name="Home" 
          component={HomeScreen}
          options={{
            tabBarIcon: ({ color, size }) => (
              <HomeIcon color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen 
          name="Profile" 
          component={ProfileScreen}
          options={({ route }) => ({
            tabBarBadge: route.params?.unreadCount,
          })}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

interface BottomTabNavigationConfig {
  /**
   * Function that returns a React element to display as the tab bar.
   */
  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
  /**
   * Safe area insets for the tab bar. By default, the device's safe area insets are automatically detected.
   */
  safeAreaInsets?: {
    top?: number;
    right?: number;
    bottom?: number;
    left?: number;
  };
  /**
   * Whether inactive screens should be detached from the view hierarchy to save memory.
   * Defaults to `true` on Android.
   */
  detachInactiveScreens?: boolean;
}

import { BottomTabBar } from "@react-navigation/bottom-tabs";

function CustomTabBar(props) {
  return <BottomTabBar {...props} style={{ backgroundColor: 'blue' }} />;
}

<Tab.Navigator
  tabBar={(props) => <CustomTabBar {...props} />}
  safeAreaInsets={{ bottom: 20 }}
  detachInactiveScreens={false}
>
  {/* screens */}
</Tab.Navigator>

interface BottomTabOptionsArgs<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = keyof ParamList,
  NavigatorID extends string | undefined = undefined
> extends BottomTabScreenProps<ParamList, RouteName, NavigatorID> {
  theme: Theme;
}

type ScreenOptionsFunction<T> = (props: BottomTabOptionsArgs<T>) => BottomTabNavigationOptions;

<Tab.Navigator
  screenOptions={({ route, theme }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName = route.name === 'Home' ? 'home' : 'settings';
      return <Icon name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: theme.colors.primary,
    tabBarInactiveTintColor: theme.colors.text,
  })}
>
  {/* screens */}
</Tab.Navigator>

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

interface NavigationListBase<ParamList extends ParamListBase> {
  [RouteName in keyof ParamList]: NavigationProp<
    ParamList,
    RouteName,
    string | undefined,
    NavigationState,
    {},
    {}
  >;
}

interface EventMapBase {
  [name: string]: {
    data?: any;
    canPreventDefault?: boolean;
  };
}

interface StaticConfig<Bag extends NavigatorTypeBagBase> {
  screens?: StaticConfigScreens<
    Bag['ParamList'],
    Bag['State'],
    Bag['ScreenOptions'],
    Bag['EventMap'],
    Bag['NavigationList']
  >;
  groups?: Record<string, StaticConfigGroup<
    Bag['ParamList'],
    Bag['State'],
    Bag['ScreenOptions'],
    Bag['EventMap'],
    Bag['NavigationList']
  >>;
  config?: Config;
}

interface StaticConfigScreens<
  ParamList extends ParamListBase,
  State extends NavigationState,
  ScreenOptions extends {},
  EventMap extends EventMapBase,
  NavigationList extends NavigationListBase<ParamList>
> {
  [RouteName in keyof ParamList]:
    | React.ComponentType<any>
    | StaticNavigation<any, any, any>
    | StaticRouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap, NavigationList[RouteName]>;
}

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

interface NavigationState<ParamList extends ParamListBase = ParamListBase> {
  key: string;
  index: number;
  routeNames: Extract<keyof ParamList, string>[];
  history?: unknown[];
  routes: NavigationRoute<ParamList, keyof ParamList>[];
  type: string;
  stale: false;
}