title: Pass navigation in props to menu element in React Native and React Navigation
body: <p>I'm adding a menu to every screen navigation header, so created a menu function that needs the <code>navigation</code> object to navigate to different screens based on the menu item tapped. But the <code>navigation.navigate</code> from <code>props</code> is <code>undefined</code>.</p>
  <pre><code>export default function GeneralMenu(props) {
      const [showMenu, setShowMenu] = useState(false);
  
    return (
      &lt;View style={{}}&gt;
        &lt;Menu
          visible={showMenu}
          onDismiss={() =&gt; setShowMenu(false)}
          anchor={
            &lt;TouchableOpacity onPress={() =&gt; setShowMenu(true)}&gt;
              &lt;MaterialCommunityIcons
                name=&quot;menu&quot;
                size={30}
                style={{ color: 'white' }}
              /&gt;
            &lt;/TouchableOpacity&gt;
          }&gt;
          &lt;Menu.Item onPress={() =&gt; { console.log(props.navigation)}} title=&quot;Screen1&quot; /&gt;
          &lt;Menu.Item onPress={() =&gt; {props.navigation.navigate('Screen1', {})}} title=&quot;Screen1&quot; /&gt;
        &lt;/Menu&gt;
      &lt;/View&gt;
    );
  </code></pre>
  <p>Then I use it like this:</p>
  <pre><code>return (
      &lt;Provider&gt;    
          &lt;NavigationContainer&gt;
            
            &lt;Stack.Navigator&gt;
              &lt;Stack.Screen
                name=&quot;Home&quot;
                component={HomeComponent}
                options={{ title: 'Home',
                  headerTitleAlign: 'center',
                  headerTintColor: '#fff',
                  headerStyle: {
                    backgroundColor: 'red'
                  },
                  headerRight: (navigation) =&gt; &lt;GeneralMenu navigation={navigation} /&gt;,
                }}
              /&gt;
              ... 
              ...
          &lt;/NavigationContainer&gt;
      &lt;/Provider&gt;
  );
  </code></pre>
  <p>The <code>console.log()</code> when first menu item is tapped shows:</p>
  <pre><code>Object {
    &quot;canGoBack&quot;: false,
    &quot;tintColor&quot;: &quot;#fff&quot;,
  }
  </code></pre>
  <p>As you see there is no navigate property. Please, any idea what I'm doing wrong?</p>