Bottom Tab with expo-router 3

[silencer07]

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<ParamListBase>,
  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

[silencer07]

Found out the above does not work because it removes the header of the containing root stack!