React Navigation Integration

function createMaterialBottomTabNavigator(): TypedNavigator<ParamListBase, NavigationState, MaterialBottomTabNavigationOptions, MaterialBottomTabNavigationEventMap, MaterialBottomTabNavigationProp<ParamListBase>>;

interface MaterialBottomTabNavigationOptions {
  title?: string;
  tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
  tabBarLabel?: string | ((props: { focused: boolean; color: string }) => React.ReactNode);
  tabBarBadge?: string | number | boolean;
  tabBarAccessibilityLabel?: string;
  tabBarTestID?: string;
  tabBarColor?: string;
  tabBarStyle?: StyleProp<ViewStyle>;
}

interface MaterialBottomTabNavigationProp<T extends ParamListBase> {
  navigate<RouteName extends keyof T>(name: RouteName, params?: T[RouteName]): void;
  goBack(): void;
  reset(state: PartialState<NavigationState> | NavigationState): void;
  setParams(params: Partial<T[keyof T]>): void;
  dispatch(action: NavigationAction): void;
  isFocused(): boolean;
  canGoBack(): boolean;
  getId(): string | undefined;
  getParent<T = NavigationProp<ParamListBase> | undefined>(id?: string): T;
  getState(): NavigationState;
}

interface MaterialBottomTabScreenProps<T extends ParamListBase, K extends keyof T = keyof T> {
  navigation: MaterialBottomTabNavigationProp<T>;
  route: RouteProp<T, K>;
}

interface MaterialBottomTabNavigationEventMap {
  tabPress: { data: undefined; canPreventDefault: true };
  tabLongPress: { data: undefined };
  focus: { data: undefined };
  blur: { data: undefined };
  state: { data: { state: NavigationState } };
  beforeRemove: { data: { action: NavigationAction }; canPreventDefault: true };
}

function MaterialBottomTabView(props: MaterialBottomTabViewProps): JSX.Element;

interface MaterialBottomTabViewProps {
  navigationState: {
    index: number;
    routes: Array<{ key: string; title?: string; icon?: string; badge?: string | number | boolean; color?: string; accessibilityLabel?: string; testID?: string }>;
  };
  onIndexChange: (index: number) => void;
  renderScene: (props: { route: Route; jumpTo: (key: string) => void }) => React.ReactNode;
  renderIcon?: (props: { route: Route; focused: boolean; color: string }) => React.ReactNode;
  renderLabel?: (props: { route: Route; focused: boolean; color: string }) => React.ReactNode;
  renderTouchable?: (props: TouchableProps) => React.ReactNode;
  getLabelText?: (props: { route: Route }) => string | undefined;
  getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
  getTestID?: (props: { route: Route }) => string | undefined;
  getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
  getColor?: (props: { route: Route }) => string | undefined;
  activeColor?: string;
  inactiveColor?: string;
  keyboardHidesNavigationBar?: boolean;
  barStyle?: StyleProp<ViewStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

import React from 'react';
import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
import { MaterialBottomTabView } from 'react-native-paper';

// With React Navigation
const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#e91e63"
      barStyle={{ backgroundColor: '#694fad' }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color }) => (
            <Icon name="bell" color={color} size={26} />
          ),
          tabBarBadge: 3,
        }}
      />
    </Tab.Navigator>
  );
}

// Direct Material Bottom Tab View
function DirectTabView() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'home', title: 'Home', icon: 'home' },
    { key: 'notifications', title: 'Notifications', icon: 'bell', badge: 3 },
  ]);

  const renderScene = ({ route, jumpTo }) => {
    switch (route.key) {
      case 'home':
        return <HomeTab jumpTo={jumpTo} />;
      case 'notifications':
        return <NotificationsTab jumpTo={jumpTo} />;
      default:
        return null;
    }
  };

  return (
    <MaterialBottomTabView
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  );
}

interface ParamListBase {
  [key: string]: object | undefined;
}

interface NavigationState {
  key: string;
  index: number;
  routeNames: string[];
  history?: unknown[];
  routes: NavigationRoute<string>[];
  type: string;
  stale: false;
}

interface NavigationRoute<RouteName extends string = string> {
  key: string;
  name: RouteName;
  params?: object;
  path?: string;
}

interface NavigationAction {
  type: string;
  payload?: object;
  source?: string;
  target?: string;
}

interface RouteProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> {
  key: string;
  name: RouteName;
  params: ParamList[RouteName];
  path?: string;
}

type TypedNavigator<
  ParamList extends ParamListBase,
  State extends NavigationState,
  ScreenOptions extends {},
  EventMap extends EventMapBase,
  Navigation extends NavigationProp<ParamList>
> = {
  Screen: React.ComponentType<{
    name: keyof ParamList;
    component?: React.ComponentType<any>;
    children?: (props: { navigation: Navigation; route: RouteProp<ParamList> }) => React.ReactNode;
    options?: ScreenOptions | ((props: { navigation: Navigation; route: RouteProp<ParamList> }) => ScreenOptions);
    initialParams?: Partial<ParamList[keyof ParamList]>;
    getId?: ({ params }: { params: ParamList[keyof ParamList] }) => string | undefined;
  }>;
  Navigator: React.ComponentType<{
    id?: string;
    initialRouteName?: keyof ParamList;
    children: React.ReactNode;
    screenListeners?: ScreenListeners<ParamList, State>;
    screenOptions?: ScreenOptions | ((props: { navigation: Navigation; route: RouteProp<ParamList> }) => ScreenOptions);
  } & ExtraNavigatorProps>;
};