Aum Singhal
Aum Singhal

Reputation: 73

Reset the current active navigator in react native

I'm new to react native so sorry in advance I am not able to use the proper terms or my approach to get to the solution is not apt. would really love your suggestions. well the problem is,

I was trying to create a form. it's kind of a very complicated one. there is a progress bar in the top, something like this,

enter image description here

Each of the step contains few more internal steps but i don't need any stepper for that, so you can think these of as sections of the form and inside each section, you can have multiple steps. to approach this, i created 3 different stack navigators for each section something like this,

const firstStackConfig = [
    {name: "Screen1", screen: <Screen1 />},
    {name: "Screen2", screen: <Screen2 />},
    {name: "Screen3", screen: <Screen3 />},
]
const secondStackConfig = [
    {name: "Screen1", screen: <Screen1 />},
    {name: "Screen2", screen: <Screen2 />},
    {name: "Screen3", screen: <Screen3 />},
]
const thirdStackConfig = [
    {name: "Screen1", screen: <Screen1 />},
    {name: "Screen2", screen: <Screen2 />},
    {name: "Screen3", screen: <Screen3 />},
]

and using this config, from the last screen, i simply navigated to the different stack navigator. for some reasons, i need to reset the last navigator, which is thirdStackConfig from the Screen3 as that section needs to be started in a completed in particular order which is,

loop1[ screen1 -> screen2 -> screen3] -> loop2[screen1 -> screen2 -> screen3] ... and so on,

but the problem here is that from the loop2, i can go back using device back button which will come into loop1, which i don't want. i want that if a person clicks next on screen3, to I should be redirected to screen1 but my previous stack of thirdStackConfig should be cleared.

why i want that?!! so that if I press back on screen1 of thridStackConfig, i should be able to go back to secondStackConfig, hence i only want to clear the thirdStackConfig.

I know we have a method navigation.dispatch(commonActions.reset()) and also NavigationActions.reset() but both of them suppose to clear to full stack while I just want to clear the specific stack.

Note: I am using functional approach than class approach. just mentioning as i found few mentioning that i can pass it as a prop in a class and something like that 🤯

Thanks a lot for your responses!!

Upvotes: 0

Views: 21

Answers (0)

Related Questions