CODEWITHSUNDEEP
expoexpo-router
Andrew Einhorn
Andrew Einhorn

Reputation: 1163

back button with universal links and expo router

The issue

When I use a universal link to direct my user into a nested screen in my expo app, it works fine. But my screens in expo router each have a back button which execute router.back() when clicked. These back buttons work correctly so long as the user opened the app normally.

However, when a universal link is used to open the app, these back buttons no longer work as expected (see video below). They either cause the app to crash, or to navigate back to an unintended screen.

This happens because there is no navigation history when you open an app with a universal link. The docs describe using initialRouteName in unstable_settings to always give your user some place to go back to. But if you have several different bottom tabs, you want to be able to specify a different initialRouteName for each tab.

I include a minimum reproducible example below. Any help would be greatly appreciated.

Burgers and Icecreams App

The repo for this example is contained here.

As you will see in the video, when the user clicks the deeplink to navigate to tabs/icecreams/recipes/2, clicking the back button - router.back() - does not take them back to tabs/icecreams, but instead takes them to tabs/burgers. And they then get stuck in a loop and cannot get back to the tabs/icecreams screen.

Video: https://youtube.com/shorts/uiHL6KDjFQc?si=LD2LOJbkEF7qW8Mi


├── _layout.tsx
├── index.tsx
├── signin.tsx
├── signup.tsx
├── tabs
│   ├── _layout.tsx
│   ├── burgers
│   │   ├── _layout.tsx
│   │   ├── index.tsx
│   │   └── recipes
│   │       ├── [recipe]
│   │       │   ├── _layout.tsx
│   │       │   └── index.tsx
│   │       └── _layout.tsx
│   └── icecreams
│       ├── _layout.tsx
│       ├── index.tsx
│       └── recipes
│           ├── [recipe]
│           │   ├── _layout.tsx
│           │   └── index.tsx
│           └── _layout.tsx
└── welcome.tsx

Upvotes: 2

Views: 1082

Answers (2)

Pedro Santos
Pedro Santos

Reputation: 26

Here is a link with the details:

https://docs.expo.dev/router/reference/troubleshooting/#missing-back-button

Basically put into the _layout file the const:

export const unstable_settings = {
  initialRouteName: "index",
};

Upvotes: 0

Evan Bacon
Evan Bacon

Reputation: 741

Hard to say exactly without a clearer understanding of the file structure but here are some general tips. Check out this FAQ about missing back buttons for more info.

When you navigate using "client-side navigation" (normal nav on native) there's an internal state object which creates a history object to ensure things like back buttons exist.

You should think of deep links like server navigations on the web, these go to a screen without creating a history object in memory. Expo Router supports creating shallow history where a stack layout can have an "anchor" screen that must always be rendered. This is defined using unstable_settings.initialRouteName (we'll rename this to "anchor" in the future).

Consider an app like 𝕏 (Twitter) where you can deep link to a post (Tweet) but can always go back to the feed route. Even though the post route can be pushed on any number of stacks across any of the tabs, the deep link always goes to the default (home)/[user]/status/[post].tsx this is possible using groups, and initialRouteName. Anything more custom will require custom redirect logic.

Upvotes: 0

Related Questions