CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
abhi
abhi

Reputation: 71

how can i reset the React Native app navigation to current screen of React Navigation

I am trying to build my first React Native app and I am stuck with a navigation issue. My app has three screens in the Stack Navigator 

Home 
Login 
User (User screen again is a Tab Navigator with three screens UserProfile, UserHome, UserSettings)

My Navigator 

const Navigator = StackNavigator(
  {
   Home: {
      screen: HomeScreen
    },
    Login: {
      screen: LoginScreen,
    },
   User: {
      screen: UserTabNavigator,
    }
  },{
    initialRouteName: 'Home'
  },
  {
    navigationOptions: () => ({
      headerTitleStyle: {
        fontWeight: 'normal',
      },
    }),
  }
);

The initial route is Home so the app opens in Home screen, from there tapping on Login takes to Login screen

Now in my Login Component, after successful authentication I am redirecting to the User Screen.

When I get to the User Screen I see a back button and tapping it is taking me back to Login screen

I wanted to reset the navigation stack on successful authentication and set User screen as the root, so in the Login function I added 

const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({ routeName: 'User' })
    ]
});
this.props.navigation.dispatch(resetAction);

This works as I don't see the back button now, but after Login I see a weird animation of swipe back and briefly I see the Home screen and then redirected to User screen

What am I doing wrong?

Upvotes: 1

Views: 1124

Answers (1)

jaycee
jaycee

Reputation: 311

You could do a normal navigation and disable the left header (or change it with wathsoever you need) then you can gesturesEnabled: false so on IOS it wont allow to go back through swipe... it's not the best way to do it( it can easily be the worst way since your stack does't actually reset so your index could mess up) but I think it's the fastest work around

Edit: As I currently see see now they have fixed that weird animation so using the normal reset should work just fine (date March 26 2018)

Upvotes: 1

Related Questions