callstack / callstack/react-native-paper
createMaterialBottomTabNavigator return type is any
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
Using `createMaterialBottomTabNavigator` from ` "react-native-paper/react-navigation"` returns fully functional Tab navigator, but with `any` type, making it impossible to work with using Typescript.
### Expected behaviour
It should return something which will allow Intelisense to work as it should: e.g. it should instruct user to use `` or to use `component` prop in ``
### How to reproduce?
```tsx
import TabBarIcon from "@/src/components/TabBarIcon";
import { createMaterialBottomTabNavigator } from "react-native-paper/react-navigation";
import MessagesRoute from "./messages";
import Notifications from "./notifications";
const Tabs = createMaterialBottomTabNavigator();
export default function CommunicationLayout() {
return (
}}
/>
undefined }}
/>
);
}
```
### Preview

### What have you tried so far?
There is no easy solution for that. I tried installing `react-navigation` and importing types, but it didn't help.
### Your Environment
| software | version
| --------------------- | -------
| ios | x
| android | 13
| react-native | latest
| react-native-paper | latest
| node | 22.13.1
| npm or yarn | pnpm - latest
| expo sdk | 53
Contributor guide
Research direction
Start at the createMaterialBottomTabNavigator export from react-native-paper/react-navigation and reproduce the TypeScript example from the issue. Trace the returned navigator's type definitions and verify that Tabs.Navigator and Tabs.Screen provide IntelliSense and typed component usage without returning any.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100