I'm having the same problem with animations when I reset or navigate backwards more than 1 screen. Here's the StackOverflow question

I have the same issue also. I am wondering if using a custom Transitioner would allow resetting the stack without any animations: https://reactnavigation.org/docs/views/transitioner

@diegorodriguesvieira hey, you need not to jump to another page, just use header null , and setstate in one page render different component

@diegorodriguesvieira i don't understand?

@aqnaruto but if I just navigate to a page without a header, I'll still have the navigation stack with the items because it has not been reset, can I have performance issues with that?

@LaurensLang I need to reset to the first navigation page inside the tab, however without seeing the animations for each card in the stack

@davidysong I will try, thanks

+1 anyone with a solution?

+1

@diegorodriguesvieira did you figure this out yet? What you are trying to accomplish is basically default iOS behaviour and should work out of the box ideally.

Here's a concise proposal that will fix this in many other issues:

#1663

I've really similar issue.
My navigation structure is like below

TabNavigator
---Tab1(StackNavigator)
--------Screen1
----------Screen2
---Tab2
---Tab3

The problem is - when first land on Tab1, it shows Screen1 and I can navigate to Screen2.
And then I go to Tab2 and I go back Tab1 again and reset the Tab1's StackNavigator to show Screen1(First page of Tab1) because Tab1's current page is Screen2.
Reset works but when I am doing reset, it shows transition animation of back transition Screen2->Screen1
I really want to remove this back transition animation when resetting Tab1's StackNavigator.
Is there any workaround of this issue?

I've spent so much time to solve this issue and googled a lot.
But no appropriate answers about this issue.
Some one answered that we can use transitionConfig option but if we remove animation by this option, the animation of navigate action also removed.
Such as Screen1->Screen2 animation also removed because transitionConfig is set on StacNavigator of Tab1 and this config removes all animation of Tab1's StackNavigator.

I want to show animation when navigating and only want to remove animation when resetting.
Any kind of answers will be appreciated.
Thanks

+1
When I want to backward more than 1 screen, the animation is "5-4-3-2-1", but I just want "5-1"

@diegorodriguesvieira Did you find a workaround for this?

Hello @jamesone, unfortunately I have not found any workaround yet...

@diegorodriguesvieira @jamesone
i also get the same problem. So if you have any workaround pelase tell me .

@cccRaim 中间页面的闪屏怎么去掉，，，你有方法吗？

Has anyone found any solution for this issue?

@rajsuvariya yeah~ I change some project code then it work fine. You can check this https://github.com/gorokhovich/react-navigation/commit/30e6d0cc73406e7697f5b846a3a7c6a1ddca9862

@NSShentu sorry I am not able to understand anything from the link. Can you provide code for removing animations?

@rajsuvariya
+

• // work around for flashing scenes
• let k = null;
• let v = null;
• staleScenes.forEach(scene => {
• let {key} = scene;
• k = key;
• v = scene;
• });
• newStaleScenes = k && v ? new Map([[k, v]]) : new Map();
• newStaleScenes.forEach(mergeScene);
• // staleScenes.forEach(mergeScene);
• // work around end

use the + code replace the function:
staleScenes.forEach(mergeScene);
in src/views/ScenesReducer.js file

@NSShentu Thanks it solved the issue

Same issue. From the reactions on this issue, it sounds like most would assume a single transition animation on a reset should be the default.

@NSShentu are you going to submit a PR?

+1

@NSShentu your code works, but it gives black screen for a second. any solution?

My temporary solution is creating a custom action Navigation/ROOT and do a init followed by reset. In that case there is no animation.

and my reducer looks like

export const reducer = (state, action: any = {}) => {
  let newState;
  if (action.type === 'Navigation/ROOT') {
    newState = AppNavigator.router.getStateForAction(NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: action.routeName })
      ]
    }), AppNavigator.router.getStateForAction(NavigationActions.init()));
  } else {
    newState = AppNavigator.router.getStateForAction(action, state);
  }
  return newState || state;
}

@evollu this ended up overwriting my Home routename (though it may be more related to my setup).

This solution worked for my personal setup:

export const reducer = (state, action: any = {}) => {
  let newState;
  if (action.type === 'Navigation/ROOT') {
    // fully reset routes to initial state
    newState = AppNavigator.router.getStateForAction(NavigationActions.init());
    // put me back on my last tab
    newState.routes[0].index = TabHomeRoutes.indexOf(action.routeName);
  } else {
    newState = AppNavigator.router.getStateForAction(action, state);
  }
  return newState || state;
}

+1

This solution worked for me. Note that if you have 4 screen A, B, C, D and want to back from D to A, you have to call NavigationActions.back with key of B

backToRoute = (navigation, name) => {
    const routes = navigation.state.routes
    for (var i = 0; i < routes.length - 1; i++) {
      if (routes[i].routeName == name) {
        navigation.dispatch(NavigationActions.back({ key: routes[i + 1].key }))
        break
      }
    }
  }
```

closing since this was fixed by #2520, but feel free to reopen in case the issue persists

@vonovak #2520 does not work as intended.

After almost giving up on react-navigation I found your example for extending the NavigatorService but it is incomplete, it's missing the return for when there are no nested navigators.

function getRouteWithName(navigationState, name) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];

  // dive into nested navigators
  if (route.routes) {
    // NOTE +1 is because goBack accepts from, not to!
    const index = route.routes.findIndex(r => r.routeName === name);
    if (index > -1) {
      return route.routes[index + 1];
    }
    return getRouteWithName(route, name);
  } else {
    const index = navigationState.routes.findIndex(r => r.routeName === name);
    if (index > -1) return navigationState.routes[index + 1];
  }

  return null;
}

does this issues solved? In iOS we can simply push viewcontrollers by nav just disable the animation.

• 1 ..

welcome to RNRF, easy case for that~

How is it solved in RNRF @dustturtle

@luqmanrom it is not solved there as well. RNRF is based on React Navigation.
see aksonov/react-native-router-flux#2713

can someone please create a new issue for this and include a link to an example reproducing it on https://snack.expo.io or github? please without any superfluous code. I'd be happy to investigate. thanks!