expo / router

[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps

Home Page:https://docs.expo.dev/routing/introduction/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useRouter replace() adds item to the history in v2

cameron-pulcifer opened this issue · comments

Which package manager are you using? (Yarn is recommended)

yarn

Summary

In expo-router v2, when I use router.replace(), it pushes a history item on the stack. I've tried with just the path as a string and also with the config object.

For some context, I'm inside a modal stack. When I call replace(), I want load a screen from the stack inside the current modal and have no history so when I click the done button, it can just call router.back(). But it pushes a new screen inside the modal and adds a back button to the screen. This worked fine in v1.

Minimal reproducible example

Modal setup:

<Stack.Screen
  name="details"
  options={{
    headerShown: false,
    presentation: 'modal',
    gestureEnabled: false,
  }}
/>

"details" stack (inside modal above)

<Stack>
  <Stack.Screen
    name="index"
  />
  <Stack.Screen
    name="edit"
  />
  <Stack.Screen
    name="another"
  />
</Stack>

Inside the index, click a button to go to the edit screen. Either of the following pushes an item on the history stack

router.replace('/details/edit');
router.replace({ path: '/details/edit' });

I discovered the culprit - unstable_settings. When I added this to my root layout, it broke replace(). Is there a setting the re-enables replace to work correctly?

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

This is documented behavior: https://docs.expo.dev/routing/navigating-pages/#replacing-screens

Native navigation does not always support replace. For example on Twitter, you wouldn't be able to "replace" directly from a profile to a tweet, this is because the UI requires a back button to return to the feed or other top-level tab screen. In this case, replace would switch to the feed tab, and push the tweet route on top of it, or if you were on a different tweet inside the feed tab, it would replace the current tweet with the new tweet. This exact behavior can be obtained in Expo Router by using [unstable_settings](https://docs.expo.dev/router/advanced/router-settings).