Modal that contains a Stack of its own

[markmccoid]

This stack overflow issue asks the question I'm looking to answer and shows how to do it in React Navigation.

Stack Overflow case

I have two questions.

1. Can this be done in Expo Router?
2. If not, how can I integrate React Navigation Code in with Expo Router to accomplish this.

Any help would be appreciated!

Thanks,

[markmccoid]

FYI, I was able to figure this out. I just followed the steps outlined in the solution in the Stack Overflow case but used the _layout files to get the modals to work.

Expo Router is really pretty amazing! I appreciate all the work the expo team has done on it!

[leggomuhgreggo]

@markmccoid thank you for looking into this -- I was stuck.

Here's where I landed after reviewing this discussion:

tree

app
| -- modal-stack
|    |-- _layout.tsx
|    |-- modal-screen-1.tsx
|    |-- modal-screen-2.tsx
| -- _layout.tsx
| -- index.tsx

app/modal-stack/_layout.tsx

// app/modal-stack/_layout.tsx
import { Stack } from 'expo-router/stack';

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: 'modal-screen-1',
};


export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="modal-screen-1" />
      <Stack.Screen name="modal-screen-2" />
    </Stack>
  );
}

app/_layout.tsx

// app/_layout.tsx

import { Stack } from 'expo-router';

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export default function  RootLayoutNav() {
  return (
      <Stack>
        <Stack.Screen name="index" options={{ headerShown: false }} />
        <Stack.Screen name="modal-stack" options={{ headerShown: false, presentation: 'modal' }}/>
      </Stack>
  );
}

Screenshot + Video

Simulator.Screen.Recording.-.iPhone.13.-.2023-07-20.at.18.18.20.mp4

[pvinis]

@leggomuhgreggo, thank you for this!

[likeSo]

Try this:

import {
  // Import the creation function
  createBottomSheetNavigator,
  // Import the types
  BottomSheetNavigationOptions,
} from "@th3rdwave/react-navigation-bottom-sheet";

import { withLayoutContext } from "expo-router";

const { Navigator } = createBottomSheetNavigator();

// This can be used like `<BottomSheet />`
export const BottomSheet = withLayoutContext<
  BottomSheetNavigationOptions,
  typeof Navigator
>(Navigator);

And use BottomSheet in the _layout.tsx.

(This code is copied from the official expo discord, sent from beacon)

[pvinis]

How about you try this! https://x.com/pvinis/status/1846538880402506009

[diegoromero93]

How about you try this! https://x.com/pvinis/status/1846538880402506009

Spam

[pvinis]

not really. it was an actual bounty, someone did fix it and claimed it :)

[wcastand]

if your issue is solved please close it as solved to sort then out :)

[markmccoid]

I am getting some strange results from the Modal Stack. I thought I had it working, but it seems like it only works if I open a standard modal first.

My _layout.tsx that has the modal stack in it looks like this:
<Stack screenOptions={{ headerShown: true }}> <Stack.Screen name="index" options={{ title: "Files", headerLeft: () => drawerLeftMenu(navigation, "stack"), }} /> <Stack.Screen name="[audioFile]" /> {/* This is the Modal Stack */} <Stack.Screen name="addAudioModal" options={{ presentation: "modal", headerShown: false }} /> <Stack.Screen name="modal" options={{ presentation: "modal", headerShown: false }} /> </Stack>

My directory structure looks like this:

The _layout.tsx inside the modal stack directory is as follows:

<Stack screenOptions={{ headerShown: true }}> <Stack.Screen name="index" options={{ presentation: "modal", title: "Import", }} /> <Stack.Screen name="importDropbox" options={{ presentation: "card", title: "Dropbox", }} /> </Stack>

It only works when I trigger the "modal" screen that is not a stack first. Then the "addAudioModal" stack will open as a modal. Otherwise, it opens as a card.

[debugtheworldbot]

I think this need to be documented, It's a pretty common situation.

[likeSo]

Totally agree! Expo router should list all supported navigator styles in the documentation, instead of requiring us to search the Internet every time.