navigationOptions not working correctly

[norbertsongin]

I've noticed that for some reason navigationOptions aren't set correctly when using useEffect to initialize them when component mounts.

Here's a basic test scenario to reproduce this:

function TestScreen() {
  const navigation = useNavigation();

  useEffect(() => {
    console.log('component did mount');
    navigation.setParams({
      test: true,
    });
  }, []);

  return null;
}

TestScreen.navigationOptions = (screenProps) => {
  console.log('navigationOptions', screenProps.navigation.state.params);
};

When this screen gets navigated to, here's what I see in logs:

navigationOptions undefined
component did mount
navigationOptions {test: true}
navigationOptions undefined

Shouldn't it be:

navigationOptions undefined
component did mount
navigationOptions {test: true}

I've also noticed that output is correct when I wrap navigation.setParams in setTimeout:

useEffect(() => {
  setTimeout(() => {
      navigation.setParams({
        test: true,
      });
  }, 0);
}, []);

[slorber]

Hi,

According to the code, I don't feel like it's related to hooks but rather related to react navigation core. Can you see if it works better without hooks?

I suspect setting params synchronously just after render makes something weird happen. As it triggers a re-render and we are still mounting the screen, the navigation options might be computed twice, because the screen has to render twice during the render phase.

But why do you want to set a param synchronously in useEffect in the first place, instead of using the navigation options? What's the usecase for this? This will only lead to unnecessary double-render on mount, while setting directly test: true param in navigation options would prevent it.

[norbertsongin]

Setting params in componentDidMount was always working fine for me and I thought this was equivalent of setting them in useEffect.

In my case I need to set a param to function that's declared in my screen's scope.

[slorber]

If you can share a snack with both componentDidMount and useEffect that would help, currently I don't have much time to help.

https://github.com/react-navigation/hooks/blob/master/src/Hooks.ts#L13
The hook does almost nothing so I don't think the issue is in this project.

navigationOptions undefined
component did mount
navigationOptions {test: true}

Maybe the issue is we shouldn't call navigationOptions twice during mount?

[daihovey]

+1 - have same issue as @lichwa