title: Easy way to add a drawer item with custom onPress?
body: <p>I'm using DrawerNavigator and, as long as I want to navigate to a new screen, all's fine.</p>
  
  <p>Now I want to add a drawer item which does not navigate to a new screen but simply triggers an action (in general). Specifically, I want to use 'react-native' Share functionality.</p>
  
  <p>I got this to work but I think the solution is not a very good one. Here's what I got so far:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>const myContentComponent = props =&gt; (
      &lt;ScrollView alwaysBounceVertical={false}&gt;
          &lt;SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}&gt;
              &lt;DrawerItems {...props} /&gt;
              &lt;TouchableItem
                  key="share"
                  onPress={() =&gt; {
                      Share.share(
                          {
                              message: 'YO: this will be the text message',
                              url: 'http://tmp.com',
                              title: 'This will be the email title/subject',
                          },
                          {
                              // Android only:
                              dialogTitle: 'This will be the title in the dialog to choose means of sharing',
                          },
                      );
                      props.navigation.navigate('DrawerClose');
                  }}
                  delayPressIn={0}
              &gt;
                  &lt;SafeAreaView forceInset={{ left: 'always', right: 'never', vertical: 'never' }}&gt;
                      &lt;View style={[{ flexDirection: 'row', alignItems: 'center' }, {}]}&gt;
                          &lt;View style={[{ marginHorizontal: 16, width: 24, alignItems: 'center' }, { opacity: 0.62 }, {}]}&gt;
                              &lt;Icon name="share" /&gt;
                          &lt;/View&gt;
                          &lt;Text style={[{ margin: 16, fontWeight: 'bold' }, { color: DrawerItems.defaultProps.inactiveTintColor }]}&gt;Share&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/SafeAreaView&gt;
              &lt;/TouchableItem&gt;
          &lt;/SafeAreaView&gt;
      &lt;/ScrollView&gt;
  );
  
  const RootStack = DrawerNavigator(
      {
          Settings: {
              screen: SettingsScreen,
          },
      },
      {
          contentComponent: myContentComponent,
      },
  );
  </code></pre>
  
  <p>Basically, I am creating a new <code>contentComponent</code> based off of the default:</p>
  
  <p><a href="https://github.com/react-navigation/react-navigation/blob/v1.5.8/src/navigators/DrawerNavigator.js#L16-L22" rel="noreferrer">https://github.com/react-navigation/react-navigation/blob/v1.5.8/src/navigators/DrawerNavigator.js#L16-L22</a></p>
  
  <p>I am copying the styles and element structure of a normal drawer item (everything under <code>TouchableItem</code>) - all this so I can define my own <code>onPress</code> which does the share logic and closes the drawer.</p>
  
  <p>There has to be a better way right? What happens if I want the "Share" drawer item somewhere amongst the drawer items rendered by <code>DrawerItems</code> (the ones that support navigation)? Right now I can only work around the items rendered by <code>DrawerItems</code>. Besides, copying so much code from react-navigation seems like really bad form.</p>
  
  <p>I just want an item which does some custom logic instead of rendering a screen.</p>