[Navigator] Animated replace

I often find myself wanting to “replace” a route i.e not adding to the history yet have the route change animate.

In iOS I would do something like this.

[navigationController popToRootViewControllerAnimated:NO];
[navigationController pushViewController:someOtherViewController animated:YES];

Maybe this is related to issue #1953 I think I would prefer an api where we could do

replace(route, animated);
push(route, animated);

[zhaotai]

I have tried all of these solutions above but all didn’t work. So I had to check the Navigator source code while coded on my own. Finally after solving some problems such as flashing and animating, not working at all, replacing without animation though I have written the code, I got the solution.

These are my code below. Most of them are copied from Navigator source code. What I did is just combine them in a right way. Um…of course, they still can be optimized. And they too much hard to understand. Trust me, I won’t understand after tonight. But it works. It’s enough. BTW, my RN is 0.27.

Navigator.prototype.replaceWithAnimation = function (route) {
  const activeLength = this.state.presentedIndex + 1;
  const activeStack = this.state.routeStack.slice(0, activeLength);
  const activeAnimationConfigStack = this.state.sceneConfigStack.slice(0, activeLength);
  const nextStack = activeStack.concat([route]);
  const destIndex = nextStack.length - 1;
  const nextSceneConfig = this.props.configureScene(route, nextStack);
  const nextAnimationConfigStack = activeAnimationConfigStack.concat([nextSceneConfig]);

  const replacedStack = activeStack.slice(0, activeLength - 1).concat([route]);
  this._emitWillFocus(nextStack[destIndex]);
  this.setState({
    routeStack: nextStack,
    sceneConfigStack: nextAnimationConfigStack,
  }, () => {
    this._enableScene(destIndex);
    this._transitionTo(destIndex, nextSceneConfig.defaultTransitionVelocity, null, () => {
      this.immediatelyResetRouteStack(replacedStack);
    });
  });
};

After defining that in prototype, you can use it anywhere you want. Just like navigator.replaceWithAnimation(route);

[miracle2k]

Inspired by the suggestion from @grabbou, I am now using this workaround:

function betterNavigator(navigator) {
  const navigation = {
    pop: () => {
      debugger;
      const routes = navigator.getCurrentRoutes();

      // Find the next route without replace mode
      var target = null;
      for (let i=routes.length-2; i>=0; i--) {
        if (!routes[i].replace) {
          target = routes[i];
          break;
        }
      }

      if (target)
        navigator.popToRoute(target);
      else
        navigator.pop();
    },
    popToTop: navigator.popToTop,
    popToRoute: navigator.popToRoute,
    popBack: (index) => {
      const routes = navigator.getCurrentRoutes();
      navigator.popToRoute(routes[routes.length - index - 1]);
    },
    replaceAtIndex: navigator.replaceAtIndex,
    push: navigator.push,
    replace: (target) => {
      debugger;
      const routes = navigator.getCurrentRoutes();
      routes[routes.length-1].replace = true;
      navigator.push(target);
    },
    getCurrentRoutes: navigator.getCurrentRoutes
  };
  return navigation;
}

Note the overwrites of replace() and pop(). pop will skip all routes that have been replaced.