Adding reset to router

[wcastand]

I need to reset my route quite often and being forced into using the navigation to reset means i don't have expo-router logic and need to do it by hand (tabs, sub stack, etc)

having a router.reset() would be amazing.

doc suggest to use replace but it's not the same thing, replace doesn't clear the history.

[likeSo]

I want this too. In the official example, The useAuth() hook uses router.replace('/') to navigate to the homepage after logged-in. But I can still slide back to the login screen! This is not practical!!

[mateitudose]

Exactly this!

[mateitudose]

Actually, users can still slide back but nothing will happen because of the useProtectedRoute hook. But having to go back like 3-4 times to clean the router stack and then exit the app is annoying and bad UX

[NandoMB]

What I'm doing as workaround to bypass this:

function clearHistory() {
    const state = navigation.getState();
    navigation.reset({
      ...state,
      routes: state.routes.map(route => ({ ...route, state: undefined }))
    });
  }

It'll have the similar effect as router.replace('/actual-href'). So, if I call the replace method, the app will literally reload, using clearHistory not....

[rick-yao]

how did you use clearhistory function ? i use it like below , but did not work for me. neither did router.replace()

[NandoMB]

The clearHistory could no be after router.push, because your component will be unmounted... Have you tried to change the order?

Actually I'm using it in different way:

const onSelectItemHandler = useCallback((profile: Profile) => {
    onChangeActiveProfile(profile);
    ref.current?.close(); // Here it's a ActionSheet component being closed...
    clearHistory();
  }, []);

So, I close the actionsheet and then clear the history. I didn't used it with router.push() but I think it should work...

[leggomuhgreggo]

Should be doable with the useNavigation`, no?

Would urge caution against mutating history too much though. Very easy for this to clash with other behaviors and it violates user expectations. There are valid reasons to use reset but often as not this reflects an underlying dynamic that could be addressed through less convoluted means, like redirects or shared routes or conditional rendering.

[wcastand]

it's doable but not safe as you said, would be better to have something handled by expo-router to have proper state.

[erquhart]

This is table stakes for even a simple app.

[rick-yao]

so is there a way to prevent user slide back to login page ?
i have read https://reactnavigation.org/docs/navigation-prop/#reset but when i use useNavigation of expo/router, i got this
does expo/router prevent me from using reset() ? also is there really a way to clear the stack history?

[NandoMB]

Have you tried this?

[likeSo]

Disable gesture actually is not a good idea. For me, the gesture still available even i disabled it...... But for now it's the only way

[Raduc4]

@rick-yao have you found the solution for this?
Somehow, the routes: [{name: ""}] doesn't match with RootParamList
Do you use a <Slot />?

[rick-yao]

@Raduc4 not fully solved , my goal is to prevent user from going back to main page (which is login page). All my actual code is in (tabs) folder , so i use router.replace whenever in login flow. So...it is temporarily solved.

[Raduc4]

@rick-yao I also could go back from (tabs) to (auth). The problem was because of the layout I used.

home/
├── event
            |------[event].tsx 
├── index.tsx
├── _layout.tsx
└── messages.tsx

Whenever I was going to [event] the go-back process ended up in (auth)/start which is my first page.
This seems like a bug, will be needed an issue to be opened

[tslater]

Just to clarify (or propose) a valid and common use cases:
Login => If I have navigation before login, I want to forget that and not let users go back UNLESS they logout. This is the one discussed here.
Logout => I don't want users that log out to retain either their history before logging in, nor after. This is a fair nuke.

[wcastand]

any chance we get a comment from the expo team is they plan to add this or if we need to do custom stuff forever? because expo 49 upgrade broke the onboarding of my app where i was doing a custom reset using the rootNav.reset :/

[joeyscarim]

is there any current way, hacky or not, that i can reset the navigators? I have tabs, each with their own stack of pages, and I need to reset everything when a user switches "teams", changing the content and access that each tab and stack page shows

[tchojnacki]

I've had some success using:

while (router.canGoBack()) { // Pop from stack until one element is left
  router.back();
}
router.replace(newPath); // Replace the last remaining stack element

It isn't perfect, but seems to work most reliably out of options provided in this thread, at least for my use case.

[joeyscarim]

thank you! I can confirm this works, although it is a bit awkward like you mentioned (local state still active on screens, back animations visible)

[n-ii-ma]

While this works great, It would be better to get an official solution from Expo Router.

[elmaxe]

This has the same effect as the above solution:

import { StackActions } from '@react-navigation/native';
import { router, useNavigationContainerRef } from 'expo-router';


const rootNavigation = useNavigationContainerRef();

const navigate = () => {
	rootNavigation.dispatch(StackActions.popToTop());
	router.replace(newPath);
}

useNavigation also works instead of useNavigationContainerRef/useRootNavigation

[oldo]

Thanks @elmaxe after trying a bunch of proposed solutions, this worked fro me

[wcastand]

the way i clear the nav history is like this.

import { CommonActions } from "@react-navigation/native"

[...]

const nav = useRootNavigation()

[...]

nav?.dispatch((state) =>
  CommonActions.reset({
    ...state,
    routes: [{ name: "/your-route" }],
    index: 0
  }),
)```

[wcastand]

if that can help this is my current hook to reset depending on a if the user is connected, if we handle an history etc

you can see how we handle the reset on tab nav and that you need to remove the leading / in your routes (the opposite of expo-router push)

export function useReset(hasHistory = true) {
	const nav = useRootNavigation()
	const isConnected = useAuthStore((s) => s.isConnected)
	return (route: Href<string> | { name: string; params?: Record<string, string> }) => {
		nav?.dispatch((state) =>
			CommonActions.reset({
				...state,
				routes: [
					hasHistory
						? isConnected
							? {
									name: "(tabs)",
									key: `(tabs)/${generateID()}`,
									params: { screen: "home", params: {} },
							  }
							: { key: `welcome/${generateID()}`, name: "(anonymous)/welcome" }
						: undefined,
					typeof route === "string"
						? { key: `${route}-${generateID()}`, name: route.replace("/", "") }
						: {
								key: `${route.name}-${generateID()}`,
								...route,
								name: route.name.startsWith("/") ? route.name.replace("/", "") : route.name,
						  },
				].filter(Boolean),
				index: hasHistory ? 1 : 0,
			}),
		)
	}
}

[seanislegend]

@dannybit Are you using valid route names when doing so? I had the issue when I was using folder names instead. You can find the proper names with navigation.getState(), it will list all available routeNames.

[nwazuo]

@seanislegend When I call navigation.getState(), the routeNames listed are those which belong to the immediate parent route. It seems that you can only reset within the nearest route stack.

[wcastand]

are you sure you are using the useRootNavigation and not the useRouter ? i get all the route as far as i know

[nwazuo]

@wcastand You're right. I now use useRootNavigation and am able to reset the state accurately but it's a bit more verbose than I'd like but works fine.

[wcastand]

can we get anyone from the expo team to actually answer? or give something, anything?

we have legit use cases for this for many people and still no one seem to care :/

It's a bit frustrating at times to never get help/answers, here or on discord :/

Sorry a bit frustrated that ticket is almost a year old soon and no one ever bothered to give insight if that's something that will be done or will never happen.

If you decided to not listen to community that's fine but then let us know so we know where we stand and that it's a close project(close ideas in discussions then) and we know we need to make support expo ticket for paid users to get answers :)

[pmakowski23]

Would love to also see what they suggest to do!

[Mik1337]

i was facing a similar issue, i solved it by re-structuring my projects app folder like this

The issue i was facing was that i couldn't reset the navigation after i completed my onboarding screens, but if i disabled gestures in the main layout, the customer won't be able to navigate back, which pretty much does the same job as a navigation reset would do in this situation.

here's my old project structure

app
├── (app)
├── index.js <- main entry for app
├── _layout.js <- main layout file
├── onboarding
└── seeall

So, i created a new route grouping called (stack), and disabled gestureNavigation in the main layout and enabled it only inside my (stack)

app
├── (stack)
│   ├── _layout.js <- layout for rest of app, gestureNavigation: true
|── _layout.js <- main layout, gestureNavigation: false
├── index.js  <- main entry for app 
└── onboarding

this seems to work as i expect, after my onboarding is done i router.replace to my home screen which lives inside my (stack) and from here i can't swipe back to my index or onboarding pages

This is ofc not a universal substiture for navigation.reset, but works in this situation...

[wcastand]

did you disabled the back button too for android? otherwise android user can still go back using the physical back button in theory no?

[Mik1337]

yeah, you're right. I didn't think about this until later; i had to write some extra code for it...

I had to add this in my (stack)/_layout.js to disable gesture based navigation

  const navigation = useNavigation();

  Platform.OS === "android" &&
    React.useEffect(() => {
      navigation.addListener("disable_back_gesture", (e) => {
        if (e.data.action.type === "GO_BACK") {
          e.preventDefault();
          console.log("Prevented back gesture");
        }
      });
    }, []);

and this in my home page, the page that's rendered immediately after my onboarding screens in my app, to disable the backbutton

  // I'm importing useFocusEffect from @react-navigation/native
  Platform.OS === "android" &&
    useFocusEffect(() => {
      // disable back button only on home screen
      const backButtonHandler = BackHandler.addEventListener(
        "disable_back_button",
        () => true
      );
      return () => backButtonHandler.remove();
    });

This seems to work for now, but it feels very hacky lol. I probably need to write some navigation tests to confirm it's behavior 🥲

[mewuto]

@wcastand
I was just looking at the documentation and saw something like this.
I had a similar problem, but I solved it!!
ref: https://docs.expo.dev/router/migrate/from-react-navigation/#reset-navigation-state

import { useNavigation } from 'expo-router'
import { CommonActions } from '@react-navigation/native'

export default function Screen() {
  const navigation = useNavigation();

  const handleResetAction = () => {
    navigation.dispatch(CommonActions.reset({
      routes: [{key: "(tabs)", name: "(tabs)"}]
    }))
  }

  return (
    <>
      {/* ...rest of the code */}
      <Button title='Reset' onPress={handleResetAction} />
    </>
  );
}

[bryanltobing]

how do you reset to base path / ? i tried index but it doesn't work

edit: index is working as expected

[Seamus1989]

why is this hard, the above example does something but not what most use cases would desire. Thanks for the post but Expo that hardly helps

[oldo]

This worked for me: #495 (reply in thread)

[oldo]

I wrapped the solution in a hook:

import type { AllRoutes } from 'expo-router';
import { router, useNavigationContainerRef } from 'expo-router';
import { StackActions } from '@react-navigation/native';

export default function useResetNavigation() {
  const navigation = useNavigationContainerRef();

  return (route: AllRoutes) => {
    navigation.dispatch(StackActions.popToTop());
    router.replace(route);
  };
}

[thozh]

do you have any error like that ?

Console Error
The action 'POP_TO_TOP' was not handled by any
navigator.
Is there any screen to go back to?
This is a development-only warning and won't be
shown in production.

[oldo]

No sorry, I haven't come across that error

[ToshiyukiTakahashi0915]

I encountered the same error, and I believe it's likely due to the stacks not being properly nested. We need to differentiate the processing based on whether there is more than one stack nested or not.

[wcastand]

moved the discussion to the expo repo
expo/expo#28485

[gabrielsh2]

In my case, I needed to resolve that same cenario that some people was struggling as well.

Just to clarify (or propose) a valid and common use cases: Login => If I have navigation before login, I want to forget that and not let users go back UNLESS they logout. This is the one discussed here. Logout => I don't want users that log out to retain either their history before logging in, nor after. This is a fair nuke.

I will share my solution in case it helps someone with de same issue.

I changed the way that I was structuring my routes and _layouts, before it was something like this

app
├── (app)
│         ├── _layout.js <- used my session context to make routes nested here private, Using Slot.
│         └──  index.js <- my home screen that need auth
 |── _layout.js <- using Stack here
├── sigIn.js 
└── signUp

The problem with that approach was that Stack on the root layout, because when I navigate from the auth pages to the home, I needed to reset the Stack state, the same issue for a logout flow redirecting from home to signIn.

Now, I'm using this approach:

app
├── (app)
│         ├── _layout.js <- used my session context to make routes nested here private, Using Stack.
│         └── index.js <- my home screen that need auth
├── (auth)
│         ├── _layout.js <- Using Stack.
│         ├──  sigIn.js
│         └──  sigUp.js
└── _layout.js <- using Slot 

Using a Slot and creating different Stacks for different flows solved my problem. When I call router.navigate from signIn to the home I'm changing the Stack instance that is rendered, then I don't have to reset.

[Mik1337]

i think this is identical to the approach i took, but are you handling back button / gestures that's found in android devices ?

i had to do this to account for that
#495 (reply in thread)

[gabrielsh2]

Unfortunately, I didn't notice that behavior. For now, I'll follow the same approach you did

[naytun]

My solution is similar to @Mik1337, using useFocusEffect(). Since we cannot use router.replace() with useEffect() due to the component not finished mounting, we have to replace the route after component did finish mounting.

   //=== Check Auth
   useFocusEffect(() => {
      if (!!authState && !!!authState?.authenticated) {
         router.replace('/')
      }
   })

[doles22]

Im using firebase auth so this code snip wont work for everyone, but conceptually I solved this by making sure on every screen I check the users authentication status at the start of every screen.

const user: FirebaseAuthTypes.User | null = auth().currentUser;

    // Check if user is authenticated, redirect if not
    useFocusEffect(
      useCallback(() => {
        if (!user) { 
          router.replace('/YOUR_SIGN_IN_SCREEN');
        }
      }, [user])
    );

Im also using expo router to navigate and on the sign in screen I just navigate with a router.replace() option to my landing screen so it removes the option for the user to go back to the sign in screen.

These two things seems to create a decent experience that way if a user does try and use back after a sign out it just routes them right back to my sign in screen.

It's working well so far and gets around the issue of a poor navigation experience for my users.

Would be awesome to see expo router have a clear history option though to start the navigation history over after a sign in or a sign out. Seems like a great opportunity to encourage more router usage vs have to get this type of feature with react native navigation.

[Re1nGer]

I've found this solution helpful: expo/expo#28485

      router.dismissAll();
      router.replace('/sign-in')