📄️ Building a layout
First create a layout route in app/_layout.js which uses the pre-built Stack component from expo-router to render a native stack navigator.
📄️ Configuring the header bar
Ports the guide React Navigation: header buttons to Expo Router.
📄️ Header buttons
Ports the guide React Navigation: header buttons to Expo Router.
📄️ Nesting navigators
Ports the guide React Navigation: Nesting navigators to Expo Router.
📄️ Authentication
It's common to restrict certain routes to users who are not authenticated. This can be achieved in a very organized way by using React Context and Route Groups.
📄️ Hosting
The current behavior of web is to export as a single-page application or (SPA). This means you need to redirect incoming URL requests on the server to the root index.html file.
📄️ Modals
Modals are a common pattern in mobile apps. They are a way to present a new screen on top of the current screen. They are often used for things like creating a new account, or for a user to select an option from a list.
📄️ Root Layout
Traditional React Native projects are structured with a single root component that is often defined in ./App.js or ./index.js. This pattern is often used to inject global providers such as Redux, Themes, Styles, etc. into the app, and to delay rendering until assets and fonts are loaded.
📄️ Tabs
Expo Router adds an additional href screen option which can only be used with screen options that are an object (e.g. screenOptions={{ href: "/path" }}) and cannot be used simultaneously with tabBarButton.
📄️ Universal Links
Expo Router automatically creates deep links for every page. You can promote your deep links to universal links by adding verification files to your website and native app.