Expo router v2 and material bottom tab navigation component

[davideroffo]

Hi folks,
Do you have any hints on how to use the react native paper bottom
Tab component with expo router v2?
Thank you

[SmashinFries]

I suggest taking a look at this example. I was able to get the material bottom tabs working in my project thanks to this.

The only issue I'm having with this implementation are type errors. I'm not really sure what types should be used for this navigator.

[CarageaAlexandru]

Great info, thank you so much! It worked wonders

[hugs7]

I get

Unable to resolve "react-native-paper/lib/typescript/react-navigation" from "app\(tabs)\_layout.tsx"

despite running

npm install @react-navigation/material-bottom-tabs

My _layout component is below. How are you meant to do file based routing while also using Material's bottom tab navigation?

/**
 * @file /app/(tabs)/_layout.tsx
 * @name AppLayout
 * @description Layout component for the tabs navigator.
 */

import React from "react";
import { Tabs, withLayoutContext } from "expo-router";
import { createMaterialBottomTabNavigator } from "react-native-paper/lib/typescript/react-navigation";

type Route = {
    key: string;
    title: string;
    icon: string;
};

const Tab = createMaterialBottomTabNavigator();

const AppLayout = () => {
    const routes: Route[] = [
        { key: "index", title: "Home", icon: "home" },
        { key: "explore", title: "Explore", icon: "code-slash" },
        { key: "account", title: "Account", icon: "person" },
    ];

    const MaterialBottomTabs = withLayoutContext(Tab.Navigator);

    const getTabComponent = (route: Route) => {
        return <Tabs.Screen name={route.key} />;
    };

    return (
        <MaterialBottomTabs initialRouteName="index" labeled={true} shifting={true}>
            {routes.map((route) => (
                <Tab.Screen key={route.key} name={route.key} component={() => getTabComponent(route)} />
            ))}
        </MaterialBottomTabs>
    );
};

export default AppLayout;

[hugs7]

If it helps anyone I resolved by using

import { Tabs } from "expo-router";
import React from "react";
import { Icon, useTheme } from "react-native-paper";

type TabConfig = {
    name: string;
    title: string;
    icon: string;
};

const AppLayout = () => {
    // ====== Prop Destructuring ======

    // ====== Constants ======
    const iconSize = 24 as const;

    const tabs: TabConfig[] = [
        { name: "index", title: "Home", icon: "home" },
        { name: "pg2", title: "Page 2", icon: "cash" },
        { name: "pg3", title: "Page 3", icon: "cash" },
        { name: "account", title: "Account", icon: "account" },
    ];

    // ====== Global Context ======

    const theme = useTheme();

    // ====== State Variables ======

    // ====== Effect Hooks ======

    // ====== Functions ======

    // ====== Event Handlers ======

    // ====== Render Helpers ======

    // ====== Render ======

    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: theme.colors.primary,
                tabBarActiveBackgroundColor: theme.colors.background,
                tabBarInactiveTintColor: theme.colors.secondary,
                tabBarInactiveBackgroundColor: theme.colors.background,
                headerShown: false,
            }}
            initialRouteName="index"
        >
            {tabs.map((tabConfig) => (
                <Tabs.Screen
                    key={`tab-${tabConfig.name}`}
                    name={tabConfig.name}
                    options={{
                        title: tabConfig.title,
                        tabBarIcon: ({ color, focused }) => <Icon source={tabConfig.icon} color={color} size={iconSize} />,
                    }}
                />
            ))}
        </Tabs>
    );
};

export default AppLayout;

[SmashinFries]

You should be importing the createMaterialBottomTabNavigator from react-native-paper/react-navigation.

@react-navigation/material-bottom-tabs is deprecated and is replaced with the above, so no need to install it.

[iM-GeeKy]

I was able to use expo/expo#25635 (comment), but never figured out how to hide tabs based upon href. Has anyone solved that?

[SmashinFries]

Not sure if this helps but I hide tabs using redirect.
If redirect is true, the tab is hidden.

<MaterialBottomTabs.Screen
	name="list"
	options={{
		tabBarIcon: 'bookshelf',
	}}
	redirect={!userID}
/>