Cannot Call updateCurrentRouteParams() During Route Transition

[joncursi]

Calling updateCurrentRouteParams during a route transition (i.e. before a freshly pushed route finishes sliding across the screen from right to left), results in a broken navigation stack. It seems that route params cannot be modified during transition. This will break:

  static route = {
    navigationBar: {
      title(params) {
        return params.title;
      },
    },
  }

  componentDidMount() {
      this.props.navigator.updateCurrentRouteParams({
        title: 'New Title',
      });
  }

The only workaround seems to be to wrap the call in a setTimeout function, as done in the README example to prevent it from calling before the route transitions, but this feels janky for a number of reasons.

1. I don't know how long to make the setTimeout because each route takes a different amount of time to transition onto the stack, depending on the phone + component performance
2. Often my new params come back faster than the time it takes to transition, so I'd rather not wait
3. Flashing new values to the screen (i.e. new title and new renderRight component), results in sub-optimal UX

This may be a bug in NavigationExperimental core, I've logged the same type of issue on the react-native repo as well: https://github.com/facebook/react-native/issues/9326

[mnichols]

@joncursi continuing over here. It turns out that the ExNavigationStack uses ReactExperimental's NavigationTransitioner directly so it is trivial to tap into the onTransitionEnd event and perform next steps there. I just modified my local ex-navigation to support passing through the onTransitionEnd event like so:

    render() {
        return (
            <NavigationProvider router={ router }>
                <StackNavigation
                    defaultRouteConfig={{
                        navigationBar: {
                            backgroundColor: palette.orange,
                            color: '#fff',
                            tintColor: '#fff',
                        }
                    }}
                    initialRoute={ router.getRoute('home', { title: 'foo'}) }
                    onTransitionEnd={ () => { this.nextProposer()  }}
                />
            </NavigationProvider>
        )
    }

This is far simpler than directly in NavExp with their card stacks layers. So it appears a sep issue for support on these events in NavigationTransitioner could be submitted to pass through.

[msageryd]

onTransitionEnd is great to have. I suppose you could do almost the same with InteractionManager.runAfterInteractions.

But this makes for a suboptimal UX as @joncursi states. Is it not possible to set the title from props before the transition starts without adding the params in route push?

[joncursi]

Agree 100% with @michaelswe - would much prefer to set values before transition starts, so that they can be part of the transitioning elements, rather than flashing in new values at the end. As he also states, the goal here is to do this without having to provide these params from the component invoking the push, because this is the best separation of concerns in the component model.

[joonhocho]

I am having the same issue. Any updates on this?

[sibelius]

what is the best workaround for this?

[alxyuu]

I used a custom component for renderTitle that updates through redux