Add callbacks to Navigator methods (push / pop / etc)

Not sure if this is something you’re interested in adding, but I think it would be useful to be able to pass a callback to Navigator methods that would fire when the transition (as defined by the sceneConfig) has completed.

Use case

I’m working on an app with a pin entry screen that is displayed whenever you start a workflow on the Home screen. I want the pin entry scene to float up from the bottom of the screen, then when it’s dismissed, I want the next scene to enter from the right after the pin screen has animated out.

Example

(user taps a button)

navigator.push({
  scene: PinEntryScene,
  sceneConfig: FloatFromBottom,
  props: { nextScene: WorkflowScene }
});

(user enters pin)

navigator.pop(() => {
  navigator.push({
    scene: this.props.nextScene,
    sceneConfig: HorizontalSwipeJump
  });
});

Workaround

It’s awkward to use the navigationContext events to manage this, so at the moment I’m wrapping my next scene transition in a setTimeout which is quite brittle (it relies on knowing the sceneConfig used to transition to a scene, which will not always be possible)

navigator.pop();
setTimeout(() => {
  navigator.push({
    scene: this.props.nextScene,
    sceneConfig: HorizontalSwipeJump
  });
}, 500);

…or is there a better way to achieve this that I’ve missed?

[hulvei3]

For me the problem was that the InteractionManager wasn’t highlighted enough in the docs 😃 If you just need to wait for animations to finish use this. http://facebook.github.io/react-native/releases/0.39/docs/timers.html

[Kudo]

Are there any updates for change/willchange or willblur/didblur event? I didn’t see these events in current master branch code. I would like to have willblur/didblur and I can help for a PR but not sure if this will fit React Native’s road map.

My use case is for react-redux. Currently I use Navigator with react-redux, unfortunately, Navigator.push() will keep old components and these old/hidden components also listen for new actions. When doing Navigator.pop(), the old component was be changed due to previous action changes.

What I am thinking is to add Component.tryUnsubscribe() in willblur and Component.trySubscribe() in didfocus.