title: React Navigation v5: How to write a navigation route for a custom Navigation header button?
body: <p>I am trying to add a &quot;Gear&quot; button on <code>headerRight</code> of Navigation header for all screens of my app. I added the button as <code>ScreenOptions</code> of <code>Stack.Navigator</code> inside a <code>NavigationContainer</code> in my <code>App.js</code> so that all <code>Stack.Screens</code> inside this Stack will have this button on header.</p>
  <p>Now I need this button press to navigate to another screen (settingsScreen). I cannot add <code>navigation.navigate('settingsScreen')</code> onto the onPress event of the button like I do from the screens because there is no navigation prop available in the App.js file. Here is my code snippet.</p>
  <pre><code>const Stack = createStackNavigator();
  
  const myStack = () =&gt; {
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator
          screenOptions={{
            headerRight: () =&gt; (
              &lt;Button
                title='Gears'
                onPress={() =&gt; {}}   // no navigation prop available on this file
              /&gt;
            ),
          }}
        &gt;
          &lt;Stack.Screen
            name='Home'
            component={HomeScreen}
            options={{ title: 'Home' }}
          /&gt;
          &lt;Stack.Screen
            name='Add new expense'
            component={AddNewExpense}
          /&gt;
          &lt;Stack.Screen
            name='Settings'
            component={SettingsScreen}
          /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>
  <p>How can this be achieved? Thanks in advance!</p>