callstack / callstack/react-native-paper
Bottom Tab with expo-router 3
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
Scouring from net I was able to have expo-router use react-native-paper bottom tabs. However `screenOptions` and `tabBarIcon` is having error in typescript.
```
import {
createMaterialBottomTabNavigator,
MaterialBottomTabNavigationOptions,
MaterialBottomTabNavigationEventMap,
} from "react-native-paper/react-navigation";
import { TabNavigationState, ParamListBase } from "@react-navigation/native";
import { withLayoutContext } from "expo-router";
import {
BottomTabNavigationEventMap,
BottomTabNavigationOptions,
} from "@react-navigation/bottom-tabs";
const BottomTabNavigator = createMaterialBottomTabNavigator().Navigator;
export const MaterialBottomTabs = withLayoutContext<
MaterialBottomTabNavigationOptions | BottomTabNavigationOptions,
typeof BottomTabNavigator,
TabNavigationState,
MaterialBottomTabNavigationEventMap | BottomTabNavigationEventMap
>(BottomTabNavigator);
```
What is the proper way of integrating expo-router to react-native-paper's bottom tab without having to resolve to using any on `screenOptions` and manually typing the `tabBarIcon` option
Contributor guide
Assessment
This issue has not been assessed yet.