Modal on top of Tab Navigator

[sbkl]

Hi,
My use case is:

• I have one tab navigator
• When clicking the image in any of the tab, it shows a modal on top of the tab navigator to display the images and other details.

How would you do it with expo-router?

In React Navigation, I'm able to get a Tab.Navigator inside a stack navigator by using the component prop of a Stack.Screen. Then I have a second Stack.Screen as a modal showing on top of the nested tab navigator.

Simple example below in react-navigation where the TabNavigationStack component would return a Tab.Navigator:

<Stack.Navigator>
      <Stack.Screen
        name="TabNavigationStack"
        options={{ headerShown: false }}
        component={TabNavigationStack}
      />
      <Stack.Screen
        name="Modal"
        options={{ headerShown: false, presentation: "transparentModal" }}
        component={ModalScreen}
      />
</Stack.Navigator>

Thank you.

[sbkl]

Keeping playing with it and found the solution:

File structure

app/
  _layout.tsx
  (root)/
    _layout.tsx
    modal.tsx  
    (tabs)/
      _layout.tsx
      home.tsx   

And each component:

app/_layout.tsx

import { Slot } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { AuthProvider } from "../src/context/AuthContext";

export default function Layout() {
// Logic for SplashScreen, static assets loading...
  return (
    <AuthProvider>
      <Slot />
      <StatusBar />
    </AuthProvider>
  );
}

app/(root)/_layout.tsx

import { Stack } from "expo-router";

export default function ModalLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="modal"
        options={{
          presentation: "modal",
          headerShown: false,
          animation: "none",
        }}
      />
    </Stack>
  );
}

app/(root)/modal.tsx

import { Link } from "expo-router";
import { Text, View } from "react-native";

export default function Modal() {
  return (
    <View>
      <Text>Modal screen</Text>
      <Link href="../">Dismiss</Link>
    </View>
  );
}

app/(root)/(tabs)/_layout.tsx

import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="home"
        options={{
          title: "Home",
          href: "/home",
        }}
      />
// Add Screens for additional tabs
    </Tabs>
  );
}

app/(root)/(tabs)/home.tsx

import { Link } from "expo-router";
import { Text, View } from "react-native";
export default function Page() {
  return (
    <View>
      <Link href="../../modal">Present modal</Link>
      <Text>Hello</Text>
    </View>
  );
}