Resetting the navigation stack for the home screen (React Navigation and React Native)

Question

I\'ve got a problem with the navigation of React Navigation and React Native. It is about resetting navigation and returning to the home screen.

I\'ve build a StackN

Answer 1

Just mix the two solutions given above and this will work just fine, basically we have to use StackActions and key: null. Without using StackActions, it was throwing some error

import { NavigationActions, StackActions } from 'react-navigation';
const resetHandler = () => {
        props.navigation.dispatch(StackActions.reset({
            index: 0,
            key: null,
            actions: [NavigationActions.navigate({ routeName: 'PatientDetails' })]
        }))
    };

Answer 2

To use Back, you need to find the unique key associated with the path. Inside your navigation reducer, you can search the existing state to find the first route on the stack using that path, grab its key & pass that to Back. Back will then navigate to the screen prior to the path you gave.

  let key;

  if (action.payload) {
    // find first key associated with the route
    const route = action.payload;

    const routeObj = state.routes.find( (r) => r.routeName === route );

    if (routeObj) {
      key = { key: routeObj.key };
    }
  }

  return AppNavigator.router.getStateForAction( NavigationActions.back( key ), state );

Answer 3

The Answer is createSwitchNavigator, it those not stack up your navigation. Add your auth screen/navigator in a createSwitchNavigator with the home screen/stack.

With that, when you navigate from home to log in, the stacks are not kept.

For more on it https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack

Answer 4

The pop action takes you back to a previous screen in the stack. The n param allows you to specify how many screens to pop back by.

n - number - The number of screens to pop back by.

import { StackActions } from 'react-navigation';

const popAction = StackActions.pop({ n: 1, });

this.props.navigation.dispatch(popAction);

Answer 5

Here is how I do it:

import { NavigationActions } from 'react-navigation'

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

The important part is key: null.

That wipes the stack while navigating from a child navigator to a parent navigator.

Do that if you get this error:

For animations, I use

// https://github.com/oblador/react-native-animatable
import * as Animatable from 'react-native-animatable'

I just control all the animations myself. Put them on any component you want by wrapping it with <Animatable.View>.

Answer 6

For newest versions of react-navigation you should use StackActions for reset the stack, here's a piece of code:

// import the following
import { NavigationActions, StackActions } from 'react-navigation'

// at some point in your code
resetStack = () => {
 this.props
   .navigation
   .dispatch(StackActions.reset({
     index: 0,
     actions: [
       NavigationActions.navigate({
         routeName: 'Home',
         params: { someParams: 'parameters goes here...' },
       }),
     ],
   }))
}