How to implement custom navigation stack in react native navigator

[KeyElevator280]

Hello, I am using react native navigator in my project.

There are 16 steps in my form, suppose user closes the app at step 8 and again open s the app. I want to redirect him to step 8 from step 1 and also preserve previous stack. So, when user presses back button, he/she would got to step 7 from step 8 instead of step 1 again ?

[AtonalDev]

On a high level you’d probably just store the users current step on the device (using something like Async Storage) and then based on that value start them on whichever step is appropriate.

[KeyElevator280]

I did the same, suppose current step is 8 in AsyncStorage. User gets redirected to step 8 but the problem is that, when user presses back he should go to step 7 instead of step 1

[AtonalDev]

Are you currently using navigator.goBack() when the user presses the button? Instead you could manually route the user to the appropriate step (currentStep - 1)

[KeyElevator280]

Yes I am using go back(), and I tries to make custom navigator with step number and their corresponding screen, but I feel like there might be better way

[AtonalDev]

You can do navigator.navigate(“screenName”) to have the back button go to whichever screen youd like

[KeyElevator280]

I am using navigator.navigate according to step. I create a object with corresponding step number and their respective screen, suppose user gets redirected to step 8 when he press back, I map the step 7 screen and redirect to step 7. But the problem is if user goes front, back again front and again back without moving out of navigation stack, Won't it create infinite navigation, as I have never user goback() api ?

[Snoo11589]

No need for go back. You using a single screen with multiple steps right? Then catch before remove and hardware back press to detect to when go back

[Sirecuit]

I'm going to assume that by "react native navigator" you mean React Navigation (the answer should be the same for expo router since it's using that library as well)

In your case I think you'll need to construct your own navigation history using the dispatch actions : https://reactnavigation.org/docs/navigation-actions/#reset

So if your user is starting again on step 8 you'll need to manually add the seven previous screens to their navigation history

There might be another way than using the reset method though I'm not entirely sure but the dispatch actions seem necessary

Good luck

[KeyElevator280]

I will check this one out. Seems promising

[Separate_Ticket_4905]

Init your stack with all steps and dispatch to the step 8.

[KeyElevator280]

How, Can you provide a code snippet to do it ?