Conditionally Show/Hide Routes in expo-router + BottomTabNavigator (withLayoutContext)

[pjmvp]

I'm using expo-router together with BottomTabNavigator from react-native-paper/react-navigation.

I use withLayoutContext(...) to be able to use the MaterialBottomTabNavigation React Native component with the expo-router, as explained in the documentation and many examples on the Web.

Using file-based routing, with a structure like:

• users
  • [userId]
    • _layout
    • page-1
    • page-2
    • admin

...everything seems to work fine. I get a bottom tab navigator, with 3 tabs. Switching between them updates the URL, etc.

However, I want to be able to conditionally show/hide the "admin" tab depending on state, as shown below in the code:

import { ParamListBase, TabNavigationState } from '@react-navigation/native'
import { useGlobalSearchParams, withLayoutContext } from 'expo-router'
import React, { useEffect, useState } from 'react'
import {
	MaterialBottomTabNavigationEventMap,
	MaterialBottomTabNavigationOptions,
	createMaterialBottomTabNavigator
} from 'react-native-paper/react-navigation'

const { Navigator } = createMaterialBottomTabNavigator()

export const MaterialBottomTabs = withLayoutContext<
	MaterialBottomTabNavigationOptions,
	typeof Navigator,
	TabNavigationState<ParamListBase>,
	MaterialBottomTabNavigationEventMap
>(Navigator)

export default function UserPage() {
	const { userId } = useGlobalSearchParams<{ userId: string }>()

	const [isAdmin, setIsAdmin] = useState(false)

	useEffect(() => {
		// ... some logic that checks if user is admin - irrelevant for this, assume isAdmin can be set to true/false
		setIsAdmin(false)
	}, [])

	return (
		<>

			<MaterialBottomTabs
				initialRouteName="page-a"
				shifting={true}
			>
				<MaterialBottomTabs.Screen
					name="page-a"
					options={{
						title: 'Page A',
					}}
				/>
				<MaterialBottomTabs.Screen
					name="page-b"
					options={{
						title: 'Page B'
					}}
				/>

				{isAdmin && (
					<MaterialBottomTabs.Screen
						name="admin"
						options={{
							title: `Admin`,
						}}
					/>
				)}
			</MaterialBottomTabs>
		</>
	)
}

Instead of the desired behaviour (2 tabs) the tab is still rendered. In fact, even if I remove this from the code:

             {isAdmin && (
			<MaterialBottomTabs.Screen
				name="admin"
				options={{
					title: `Admin`,
					}}
				/>
		)}

...the tab is still rendered which, I suppose, is because the file-based routing finds it.

Is there a way for me to achieve what I want and only show the tab, in the bottom navigator, if the isAdmin state is true?

Thank you in advance.

[pjmvp]

I eventually figured it out...

For my admin Tab screen I can add a redirect prop as such:

    <MaterialBottomTabs.Screen
			name="admin"
			options={{
				title: `Admin`,
			}}
                        redirect={ !isAdmin}
    />

Epiphany moment from this video.

[pjmvp]

I must admit I'm a bit disappointed with the lack of help; leaving this here so it may help others.