react-navigation-auth-flow icon indicating copy to clipboard operation
react-navigation-auth-flow copied to clipboard

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

Open saidhruv opened this issue 7 years ago • 16 comments

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

saidhruv avatar Jun 21 '17 05:06 saidhruv

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!)

spencercarli avatar Jun 21 '17 14:06 spencercarli

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.

saidhruv avatar Jun 23 '17 02:06 saidhruv

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";

akshaysinghi avatar Jun 27 '17 11:06 akshaysinghi

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.

spencercarli avatar Jun 29 '17 21:06 spencercarli

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.

saidhruv avatar Jul 03 '17 06:07 saidhruv

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').

bragur avatar Jul 07 '17 11:07 bragur

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?

saidhruv avatar Jul 10 '17 10:07 saidhruv

@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"

WillyRamirez avatar Jul 10 '17 19:07 WillyRamirez

+1

flaviohenriquecbc avatar Jul 17 '17 07:07 flaviohenriquecbc

@WillyRamirez I use 1.0.0-beta.11

saidhruv avatar Jul 18 '17 10:07 saidhruv

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))

Shhzdmrz avatar Sep 11 '17 15:09 Shhzdmrz

@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

sunnynegi avatar Oct 31 '17 10:10 sunnynegi

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

Shhzdmrz avatar Nov 02 '17 05:11 Shhzdmrz

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

louisiscoding avatar Jan 25 '18 11:01 louisiscoding

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

trinadhkoya avatar Feb 16 '18 13:02 trinadhkoya

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

myhendry avatar Apr 15 '18 06:04 myhendry