Modal navigation

Rendering a screen as a Modal means rendering it on top of other content. It's important to note that in order for this to work, the modal screen must be defined above or adjacent to the other screens it's being rendered on top of. So for example you couldn't render a screen within a tab navigator modally over the navigator.

To render a screen modally, use presentation: "modal" in its screen options. Let's try it with our counter and idea screens.

Update: app/_layout.tsx

app/_layout.tsx

@@ -4,6 +4,14 @@ export default function Layout() {
   return (
     <Stack>
       <Stack.Screen name="index" options={{ title: "Shopping list" }} />
+      <Stack.Screen
+        name="counter"
+        options={{ title: "Counter", presentation: "modal" }}
+      />
+      <Stack.Screen
+        name="idea"
+        options={{ title: "My idea", presentation: "modal" }}
+      />
     </Stack>
   );
 }

On android, the animation for the modal looks the same as the stack - the platform default. Generally it's best to stick with the UX befitting the platform, but you could experiment with changing it e.g. to animation: "fade_from_bottom".

Checkpoint

Checkpoint

✔️ Example of presentation modal

File-system based routing

Notice that we didn't have the screens defined in our layout until just now when we added to customize the screens.

Because expo router uses file-system based routing, all files you create in your /app folder become screens in your app. If you need to have other files or components in your app that are not screens (like out ShoppingListItem component), they need to be rendered outside the /app folder.