title: how to add titles in my drawer using react native?
body: <p>I'm using react native to developp an mobile application , So in my drawer ,I wanna do like groups of fonctionnalities and name each group but I don't know how to do it </p>
  
  <p>My drawer is looking like: </p>
  
  <p><a href="https://i.stack.imgur.com/TYpZz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TYpZz.png" alt="enter image description here"></a></p>
  
  <p>An example of what I'm looking for (I want to add titles in modern way):</p>
  
  <p><a href="https://i.stack.imgur.com/BSu8I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BSu8I.png" alt="enter image description here"></a></p>
  
  <p>A part of my code is :</p>
  
  <pre><code>\\The drawer page 
  const DrawerNavigator = createDrawerNavigator({
    Accueil:{
      screen:Accueil1,
      navigationOptions:{
        title:"Accueil ",
        drawerIcon:({tintColor})=&gt;&lt;Feather name="home" size={16}
        color='#ff9900'/&gt;
      }
    },
  {
      contentComponent :props =&gt; &lt;BarDrawer {...props} /&gt;,
      contentOptions:{
      activeBackgroundColor:"#58ACFA",
      activeTintColor:"white",
    }
  });
  export default createAppContainer(DrawerNavigator);
  
  \\The barDrawer that contains the image of @ 
  export default BarDrawer = props =&gt;(
  &lt;ScrollView&gt;
  &lt;Block style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}&gt;
    &lt;Block style={styles.header}&gt;
      &lt;Image style={styles.logo} source={require('./netOne.jpg')} /&gt; 
      &lt;Block right style={styles.headerIcon}&gt;
        &lt;FontAwesome5 name="bars" size={15} color={'black'} /&gt;
      &lt;/Block&gt;
    &lt;/Block&gt;
  &lt;/Block&gt;
  
  &lt;View Style={styles.contain}&gt;
  &lt;DrawerNavigatorItems {...props} /&gt;
  &lt;/View&gt;
    &lt;/ScrollView&gt;
  );
  </code></pre>