Reopened: Typescript Error when creating custom navigator

[ronitkrshah]

How to implement Material Bottom Tabs from react-native-paper?

[howljs]

How to implement Material Bottom Tabs from react-native-paper?

You can follow this guide: https://howljs.github.io/react-native-auto-route/docs/navigators/drawer

import type {ParamListBase, TabNavigationState} from '@react-navigation/native';
import {createNavigator} from 'react-native-auto-route';
import {
  createMaterialBottomTabNavigator,
  type MaterialBottomTabNavigationEventMap,
  type MaterialBottomTabNavigationOptions,
} from 'react-native-paper/react-navigation';

const BottomTabNavigator = createMaterialBottomTabNavigator().Navigator;

export const BottomTabs = createNavigator<
  TabNavigationState<ParamListBase>,
  MaterialBottomTabNavigationOptions,
  MaterialBottomTabNavigationEventMap,
  Omit<React.ComponentProps<typeof BottomTabNavigator>, 'id' | 'children'> & {
    children?: React.ReactNode;
  }
>(BottomTabNavigator);

export default BottomTabs;

[ronitkrshah]

Thanks ... I will try this

[ronitkrshah]

Typecript Is complaining with types. I guess I have implemented all correctly

import {createMaterialBottomTabNavigator} from 'react-native-paper/react-navigation';
import {createNavigator} from 'react-native-auto-route';

// types
import type {ComponentProps, ReactNode} from 'react';
import type {
  MaterialBottomTabNavigationEventMap,
  MaterialBottomTabNavigationOptions,
} from 'react-native-paper/react-navigation';
import type {TabNavigationState, ParamListBase} from '@react-navigation/native';

const TabNavigator = createMaterialBottomTabNavigator().Navigator;

const Tab = createNavigator<
  TabNavigationState<ParamListBase>,
  MaterialBottomTabNavigationOptions,
  MaterialBottomTabNavigationEventMap,
  Omit<ComponentProps<typeof TabNavigator>, 'id' | 'children'> & {
    children?: ReactNode;
  }
>(TabNavigator);

export default Tab;

Error