Skip to main content

Stack

The Stack Layout in Expo Router wraps the Native Stack Navigator from React Navigation, if you want to use the legacy JS Stack Navigator then do the following.

Installation​

Follow the installation guide for Stack Navigator.

Setup​

Contextualize the stack navigator to support the Expo Router file convention:

./CustomStack.tsx
import {
  // Import the creation function
  createStackNavigator,
  // Import the types
  StackNavigationOptions,
} from "@react-navigation/stack";

import { withLayoutContext } from "expo-router";

const { Navigator } = createStackNavigator();

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

Usage​

app/_layout.js
import { CustomStack } from "../CustomStack";

export default function RootLayout() {
  return <CustomStack />;
}