[ANDROID] Sign Out -> Back Press -> Going back to Profile page

[saidhruv]

This is an Android only issue, since iOS does not have a dedicated Back button.

Loaded the application on Android as recommended, navigated to the 'Profile' tab and clicked 'Sign Out' which led me back to the 'Sign Up' page. However, on pressing the back button, it is going to the 'Profile' tab.
Shouldn't the entire stack be cleared on Sign Out?

This is the same for the Sign In flow too.
Sign Up -> Sign In -> Click Sign In -> Home -> Back Press -> Sign In

[spencercarli]

Ahh thank you for catching this! It makes sense that this would be happening. One of the downsides of not being a full-time Android user - forget about those things 😄

I'll have to think about a solution to this one 🤔 (happy to receive any input from you or others!)

[saidhruv]

I have a partial solution to the matter. I've used the Reset option from Navigation Actions to clear the accumulated stack.

However, the only limitation I found for this approach is that if there is a nested stack involved, then it is not able to route to the child screens in one inner stack to another inner stack. I could only get it to work in my application by having only one stack.

[akshaysinghi]

In Profile.js replace Button component with
<Button backgroundColor="#03A9F4" title="SIGN OUT" onPress={() => onSignOut().then(() => navigation.dispatch(NavigationActions.reset( { index: 0, actions: [ NavigationActions.navigate({ routeName: 'SignedOut'})]})))} /> and Import
import { NavigationActions } from "react-navigation";

[spencercarli]

Toyed around with this a bit today but without much success. Was blocked at the same point as you @saidhruv. I wonder if there's a way to set up a custom getStateForAction handler for this case? I did something like that here but am not sure how/if that would work in this case.

If we could figure that out we could probably simplify/modify this whole thing and remove the createRootNavigator function.

[saidhruv]

Though a workaround, this seems to be working for nested stacks.

resetTo(route) { const actionToDispatch = NavigationActions.reset({ index: 0, key: null, actions: [NavigationActions.navigate({ routeName: route })], }); this.navigator.dispatch(actionToDispatch); }

Got it from here.

[bragur]

I guess it would be possible to use redux and redux-persist to handle your loggedIn state, which in turn gets used by createRootNavigator. So upon login you change your state and the router will rerender. Haven't tried it though, but sounds plausible. However, it would make life so much easier if you could just pass a type for the navigation, like in the react-native-router-flux syntax (type: 'reset').

[saidhruv]

I think I might have a possible solution:

Here is my use case - I have the following routes:

• SplashFlow
  - Splash
• VerifyPhoneNumberFlow
  - EnterPhoneNumber
  - VerifyPhoneNumber
• SignUpFlow
  - SignUp
• MainApplicationFlow
  - Home

The user must not go back to any of the previous routes once they come to the next routing flow, i.e, from EnterPhoneNumber screen, they shouldn't be able to go back to the Splash screen and so on.

My previous attempts ended up giving some errors, but routing like the following way does not give any error as far as I've seen:

this.props.navigation.dispatch(
      NavigationActions.reset({
        index: 0,
        key: null,
        actions: [
          NavigationActions.navigate({
            routeName: 'VerifyPhoneNumberFlow',
            action: [NavigationActions.navigate({ routeName: 'EnterPhoneNumber' })],
          }),
        ],
      }),

@spencercarli could you look into it and let me know if this solves the problem?

[WillyRamirez]

@saidhruv I have pretty much the same nav stack as you do, but unfortunately I get the same error using your fix. Which version of react-navigation are you using? Im using "1.0.0-beta.10"

[flaviohenriquecbc]

+1

[saidhruv]

@WillyRamirez I use 1.0.0-beta.11

[Shhzdmrz]

I did it by using dispatch to reset the signedout or singedin navigation with 0 index here is my code.
In router.js import NavigationActions and add these two methods.

export const ResetToSignedOut=NavigationActions.reset({
  index: 0,
  key: null,
  actions: [NavigationActions.navigate({ routeName: 'SignedOut' })],
}) 

export const ResetToSignedIn = NavigationActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate({ routeName: 'SignedIn' })
  ]
})

and from SignIn.js file navigate to home as:

onSignIn().then(() => navigation.dispatch(ResetToSignedIn)) 

and from the profile.js navigate to sign out as:

onSignOut().then(() => navigation.dispatch(ResetToSignedOut))

[sunnynegi]

@Shhzdmrz Will you please share your code

This problem is solved or not because i am facing same issue, Even i tried with navigation reset but nothing worked out , After using navigation reset call facing this error

There is no route defined for key SignedIn.
Must be one of: 'LoginScreen','signUp'
here is my issue https://stackoverflow.com/questions/47032282/how-to-implement-auth-flow-in-react-native-with-react-navigation

[Shhzdmrz]

@sunnynegi I have posted my answer to you SO thread.

[louisiscoding]

Thanks @spencercarli for the guide !
Thanks @Shhzdmrz for providing the reset improvments 👍

[trinadhkoya]

You can disable the back button using BackHandler provided by ReactNative.Let me know if you need any help

[myhendry]

I face the same issue as sunnynegi. I looked at the solution provided by Shhzdmrz on SO but so far, still get the same error