title: React Navigation 6: Override parent navigator's header configuration from an screen inside child navigator
body: <p>I have a <code>BottomTab</code> navigator nested inside an <code>Stsck</code> navigator. And the header is configured via Stack <code>screenOptions</code>:</p>
  <pre class="lang-js prettyprint-override"><code>function AppStackNavigator() {
    return (
        &lt;Stack.Navigator screenOptions={getScreenOptions}&gt;
          &lt;Stack.Screen name=&quot;BottomTab&quot; component={BottomTabNavigator}/&gt;
          ...
        &lt;/Stack.Navigator&gt;
    )
  
    const getScreenOptions = ({route, navigation}) =&gt; {
      // crazy logic ... 
      return {
        headerLeft: getHeaderLeft,
        headerRight: getHeaderRight,
        ...
      }
    }
  
  }
  </code></pre>
  <p>And in the <code>BottomTaB</code> navigator I have an screen called <code>Target</code>.  Notice that the <code>headerShown</code> is set to <code>false</code> here.</p>
  <pre class="lang-js prettyprint-override"><code>function BottomTabNavigators() {
    return (
        &lt;Tab.Navigator
            screenOptions={{headerShown: false}}
            tabBar={props =&gt; &lt;MyTabBar {...props}/&gt;}
        &gt;
          &lt;Tab.Screen name=&quot;Target&quot; component={TargetScreen}/&gt;
        &lt;/Tab.Navigator&gt;
    )
  }
  </code></pre>
  <p>In target screen I am overriding the <code>headerRight</code> of the <strong>PARENT</strong> navigator, because I need direct interaction between header and a method (<code>methodThatIsOnlyAccessableHere</code>) which is only accessible inside this screen:</p>
  <pre class="lang-js prettyprint-override"><code>function TargetScreen() {
  
    const  methodThatIsOnlyAccessableHere = () =&gt; { ... }
  
    useLayoutEffect(() =&gt; {
      const getHeaderRight = () =&gt; {
      // call methodThatIsOnlyAccessableHere
      ...
      }
  
      const parentNavigator = navigation.getParent()
      parentNavigator.setOptions({
        headerRight: getHeaderRight,
      })
  
    }, [navigation])
  }
  </code></pre>
  <h2>Current behaviour:</h2>
  <p>The top level header configuration (<code>screenOptions</code> in Stack navigator) is working perfectly. When navigating to <code>Target</code> screen, the overrided header configuration (using <code>setOptions </code>) will become active. <strong>However</strong>, when leaving  this screen, this overrided configuration still remains active (Undesired behaviour)</p>
  <h2>Desired behaviour</h2>
  <p>When leaving <code>Target</code> screen, the top level header  configuration should become active and the overrided configuration should become effectless.</p>
  <h2>Why is this my design choice ?</h2>
  <p>I am always hiding the nested navigator header (the header of the <code>BottomTab</code> navigator) and configuring the top level (parent) navigator header (<code>Stack</code> navigator) based on the state of the child navigator. I cannot move the header configuration  of <code>Target</code>  screen to the parent because in this case I will not have access to <code>methodThatIsOnlyAccessableHere</code>.</p>