title: Customize DrawerNavigator - ReactNative
body: <p>I have my side menu via DrawerNavigator. I know that to customize the drawer, it's in "contentComponents" props.</p>
  
  <p>I want for example, put a button who open a modal like : Share (to share the app on other social media)</p>
  
  <p>But for now, all my button are route. So if I click on it, it's redirect to the page (normal). I just want to add a button who react and not redirect.</p>
  
  <p>I don't know how to custom that in the Component  dynamically. I think about hardcoded each button (some for redirect, some for display simple modal).</p>
  
  <p>Here is my code :</p>
  
  <p><strong>index.android.js</strong></p>
  
  <pre><code>const DrawerContent = (props) =&gt; (
  &lt;ScrollView&gt;
      &lt;View style={styles.container}&gt;
          &lt;Text style={styles.logo}&gt;TechDico&lt;/Text&gt;
          &lt;Text style={{ paddingLeft: 10, paddingRight: 10, fontSize: 13, textAlign: 'center', color: '#f4f4f4' }}&gt;Des millions de traductions classées par domaine d'activité&lt;/Text&gt;
      &lt;/View&gt;
      &lt;DrawerItems style={{ marginTop: 30 }} {...props} /&gt;
  &lt;/ScrollView&gt;
  )
  
  const appNavigator = DrawerNavigator({
      Redirection1: {
          screen: Index,
          navigationOptions: {
              drawerLabel: 'Redirection1',
              drawerIcon: ({ tintColor }) =&gt; (&lt;Icon name="home" size={20} color={tintColor} /&gt;),
          }
      },
      DisplayModal: {
          screen: Index,
          navigationOptions: {
              drawerLabel: 'DisplayModal',
              drawerIcon: ({ tintColor }) =&gt; (&lt;Icon name="home" size={20} color={tintColor} /&gt;),
          }
      },
      Redirection2: {
          screen: Index,
          navigationOptions: {
              drawerLabel: 'Redirection2',
              drawerIcon: ({ tintColor }) =&gt; (&lt;Icon name="home" size={20} color={tintColor} /&gt;),
          }
      }, }, {
          // define customComponent here
          contentComponent: DrawerContent,
          contentOptions: {
              inactiveTintColor: '#000000',
              activeTintColor: '#1eacff',
              showIcon: true,
          }
      });
  </code></pre>
  
  <p><strong>Index class</strong></p>
  
  <pre><code>export default class Index extends Component {
      renderRoot = () =&gt; {
          const { navigation } = this.props;
  
          console.log("My Navigation ", navigation);
  
          switch (navigation.state.key) {
              case 'Redirection1':
                  return (
                      &lt;App navigation={navigation} /&gt;
                  );
              case 'DisplayModal':
  
  // TODO I don't want to return so I can remove to cancel the redirection, but now, how can I display a modal without redirect. 
                  return (
                      &lt;DisplayModal navigation={navigation} /&gt;
                  );
              case 'Redirection2':
                  return (
                      &lt;Redirection2 navigation={navigation} /&gt;
                  );
              default:
                  return (
                      &lt;Test navigation={navigation} /&gt;
                  );
          }
      }
  </code></pre>
  
  <p>I'm using 'react-navigation'.</p>