title: React Navigation v5 setOptions not working
body: <p>I'm trying to set the navigation options from my stack screen inside my component since I need to render a right header button with specific actions from my screen. Problem is that it is not working.
  The structure I'm using is as follows:</p>
  <pre><code>-StackNavigator
    -MaterialTopTabNavigator
      -tab1
      -tab2
      -tab3
  </code></pre>
  <p>Current code:</p>
  <pre><code>//My navigation
      &lt;NavigationContainer initialState={initialState} ref={ref}&gt;
        &lt;Stack.Navigator screenOptions={{ headerShown: false }}&gt;
          //some other Stacks
          &lt;Stack.Screen
            name=&quot;Detail&quot;
            component={DetailTabScreen}
            options={{
              headerShown: true, //header works ok
              headerRight: () =&gt; ( //this would work
                &lt;View style={{backgroundColor: 'red', width: 100}}/&gt;
              )
            }}
          /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
  </code></pre>
  <p>My DetailTabScreen:</p>
  <pre><code>const TopTab = createMaterialTopTabNavigator()
  const DetailTabScreen = () =&gt; (
    &lt;StoreProvider&gt;
      &lt;SafeAreaView style={{ flex: 1 }}&gt;
        &lt;TopTab.Navigator
          tabBarOptions={{
           ...options
          }}
        &gt;
          &lt;TopTab.Screen
            name=&quot;PlanDetail&quot;
            component={PlanDetail}
            options={{
              tabBarLabel: ({ color }: TabBarLabelProps) =&gt; (
                &lt;Text&gt;Detalles&lt;/Text&gt;
              ),
            }}
          /&gt;
          &lt;TopTab.Screen
            name=&quot;PlanChat&quot;
            component={PlanChat}
            options={{
              tabBarLabel: ({ color }: TabBarLabelProps) =&gt; (
                &lt;Text&gt;Chat&lt;/Text&gt;
              ),
            }}
          /&gt;
          &lt;TopTab.Screen
            name=&quot;Participants&quot;
            component={Participants}
            options={{
              tabBarLabel: ({ color }: TabBarLabelProps) =&gt; (
                &lt;Text&gt;Participantes&lt;/Text&gt;
              ),
            }}
          /&gt;
        &lt;/TopTab.Navigator&gt;
      &lt;/SafeAreaView&gt;
    &lt;/StoreProvider&gt;
  )
  </code></pre>
  <p>I already have tried setting the options inside the component as the docs suggests using the <code>useLayoutEffect</code>, also tried using the <code>useEffect</code>:</p>
  <pre><code>  useLayoutEffect(() =&gt; {
      props.navigation.setOptions({
        headerRight: () =&gt; (//does not work
          &lt;TouchableOpacity
            onPress={() =&gt; console.warn('This is a button!')}
            style={{marginRight:16}}
          &gt;
            &lt;Icon name={Platform.OS === 'ios' ? 'share-apple' : 'share-google'} type=&quot;EvilIcons&quot; style={{ color: colors.darkGreen, marginright: 16 }} /&gt;
          &lt;/TouchableOpacity&gt;
        ),
      });
    }, []);
  </code></pre>
  <p>PS: I know that hiding the header and using a custom component for my header would work as a work around but I want to know why <code>navigation.setOptions</code> is not working.</p>
  <p>Any help, any ideas would be appreciated, thanks!</p>