Incorrect types for createMaterialBottomTabNavigator

[ChromeQ]

Current behaviour

The types are incorrect when creating a material bottom tab navigator:

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

const TabNavigation = createMaterialBottomTabNavigator<TabStackParamList>(); // Type of TabNavigation is `any`

This makes it impossible to get typescript support when trying to add config or options to the TabNavigation.Navigator:

Looking at the types there are issues with the createNavigatorFactory and DefaultNavigatorOptions generics in this file: https://github.com/callstack/react-native-paper/blob/main/src/react-navigation/navigators/createMaterialBottomTabNavigator.tsx

The createNavigatorFactory does not expect any generic arguments and DefaultNavigatorOptions expects 6 but only 4 are provided.
The issues is also createNavigatorFactory comes from @react-navigation/[email protected] and the type there is actually any

Expected behaviour

I expect to get typescript intellisense when using the TabNavigation returned from createMaterialBottomTabNavigator

Preview

Your Environment

software	version
ios	x
android	x
react-native	0.76.3
react-native-paper	5.12.5
node	x.x.x
npm or yarn	[email protected]
expo sdk	52.0.14

[ChromeQ]

I have opened a corresponding issue with react-navigation as the types are under their package - react-navigation/react-navigation#12320

[ChromeQ]

A reply on the other issue confirmsthis is a breaking change and is something to be fixed in react-native-paper.
react-navigation/react-navigation#12320 (comment)

[ChromeQ]

I've just realised that the latest version of react-native-paper is v5.12.5 which has a dependency on @react-navigation/native ^6.1.2

So this is not technically broken, but it is very disappointing that react-navigation say in v7 they deprecated material bottom tabs and moved it to react-paper when it is not ready/compatible.
https://reactnavigation.org/docs/upgrading-from-6.x/#material-bottom-tab-navigator-now-lives-in-react-native-paper-package

[ChromeQ]

I think what we need is a v6 of react-native-paper which has updated dependency on the latest v7 of react-navigation.
Any chance of that happening?

[Aivanelle]

I faced the same issue a few weeks ago after I updated React Navigation to v7 and spent quite some time checking the types between v6 and v7 and this is how I got the type checking working again with the latest version of RN Paper and React Navigation v7:

import {
  DefaultNavigatorOptions,
  EventMapBase,
  NavigationState,
  ParamListBase,
  RouteConfig,
  RouteGroupConfig,
  TabNavigationState
} from '@react-navigation/native'
import {
  MaterialBottomTabNavigationEventMap,
  MaterialBottomTabNavigationOptions
} from 'react-native-paper'
import {
  MaterialBottomTabNavigatorProps
} from 'react-native-paper/lib/typescript/react-navigation/navigators/createMaterialBottomTabNavigator'

type LegacyTypedNavigator<
  ParamList extends ParamListBase,
  State extends NavigationState,
  ScreenOptions extends {},
  EventMap extends EventMapBase,
  Navigator extends React.ComponentType<any>
> = {
  Navigator: React.ComponentType<
    Omit<React.ComponentProps<Navigator>, keyof DefaultNavigatorOptions<any, any, any, any, any, any>> &
      DefaultNavigatorOptions<ParamList, any, State, ScreenOptions, EventMap, any>
  >
  Group: React.ComponentType<RouteGroupConfig<ParamList, ScreenOptions, any>>
  Screen: <RouteName extends keyof ParamList>(
    _: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap, any>
  ) => null
}

export type MaterialBottomTabNavigator<T extends ParamListBase> = LegacyTypedNavigator<
  T,
  TabNavigationState<ParamListBase>,
  MaterialBottomTabNavigationOptions,
  MaterialBottomTabNavigationEventMap,
  (_: MaterialBottomTabNavigatorProps) => React.JSX.Element
>

While it may work, I'm not sure if I missed something, hopefully someone can improve it in that case.

And this an example of how I use it:

type TabsStack = {
  Tab1: undefined
  Tab2: undefined
  Tab3: undefined
  Tab4: undefined
}

const Tabs: MaterialBottomTabNavigator<TabsStack> = createMaterialBottomTabNavigator()

Although I'm planning to use another implementation and get rid of this workaround, I hope someone find this useful.

Tested with:

Dependency	Version
react-native	0.74.5
@react-navigation/native	7.0.3
react-native-paper	5.12.5