await for react-navigation transition to finish

Question

I'm looking for a way in react-navigation to dispatch a navigation action and await for it to be fully finished before triggering the next step.

Something like:

await dispatch({
  type: 'Navigation/goBackTo',
  routeName: 'Main',
})
dispatch(anotherAction())

Currently I'm using a setTimeout workaround.

Answer 1

Not specifically related to react-navigation, but useful nonetheless: the InteractionManager API from react-native.

There is a method runAfterInteractions() which will be called after all animations have been completed, so in case of navigation I find it to be a handy tool. For example you could do something like this:

class Main extends Component {

    componentDidMount() {
        // 1: Component has been mounted off-screen
        InteractionManager.runAfterInteractions(() => {
            // 2: Component is done animating
            // 3: Do your anotherAction dispatch() here
        }); 
    }
}