Add DrawerNavigationChild to insert non-item children into drawers

README.md

@@ -479,6 +479,7 @@ import {
   StackNavigation,
   DrawerNavigation,
   DrawerNavigationItem,
+  DrawerNavigationChild,
 } from '@exponent/ex-navigation';
 
 // Treat the DrawerNavigationLayout route like any other route -- you may want to set
@@ -510,6 +511,10 @@ class DrawerNavigationLayout extends React.Component {
           />
         </DrawerNavigationItem>
 
+        <DrawerNavigationChild>
+          <Text style={styles.headingText}>Meta</Text>
+        </DrawerNavigationChild>
+
         <DrawerNavigationItem
           id='about'
           selectedStyle={styles.selectedItemStyle}
@@ -546,6 +551,10 @@ const styles = StyleSheet.create({
     height: 20
   },
 
+  headingText: {
+    fontWeight: 'bold'
+  },
+
   selectedItemStyle: {
     backgroundColor: 'blue'
   },

example/components/DrawerNavigationExample.js

@@ -9,6 +9,7 @@ import {
   StackNavigation,
   DrawerNavigation,
   DrawerNavigationItem,
+  DrawerNavigationChild,
 } from '@exponent/ex-navigation';
 import { Ionicons } from '@exponent/vector-icons';
 import { Router } from '../main';
@@ -64,6 +65,9 @@ export default class DrawerNavigationExample extends Component {
             initialRoute={Router.getRoute('home')}
           />
         </DrawerNavigationItem>
+        <DrawerNavigationChild>
+          <Text style={styles.headingText}>Meta</Text>
+        </DrawerNavigationChild>
         <DrawerNavigationItem
           id="another"
           selectedStyle={styles.selectedItemStyle}
@@ -86,6 +90,12 @@ const styles = StyleSheet.create({
     width: null,
     resizeMode: 'cover',
   },
+  headingText: {
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    color: '#777',
+    fontWeight: 'bold',
+  },
   buttonTitleText: {
     color: '#222',
     fontWeight: 'bold',

src/ExNavigation.js

@@ -17,6 +17,7 @@ export { default as SlidingTabNavigationItem } from './sliding-tab/ExNavigationS
 
 export { default as DrawerNavigation } from './drawer/ExNavigationDrawer';
 export { default as DrawerNavigationItem } from './drawer/ExNavigationDrawerItem';
+export { default as DrawerNavigationChild } from './drawer/ExNavigationDrawerChild';
 
 export { default as NavigationBar } from './ExNavigationBar';
 

src/drawer/ExNavigationDrawer.js

@@ -22,6 +22,7 @@ import { createNavigatorComponent } from '../ExNavigationComponents';
 
 import ExNavigationDrawerLayout from './ExNavigationDrawerLayout';
 import ExNavigationDrawerItem from './ExNavigationDrawerItem';
+import ExNavigationDrawerChild from './ExNavigationDrawerChild';
 import type ExNavigationContext from '../ExNavigationContext';
 
 export class ExNavigationDrawerContext extends ExNavigatorContext {
@@ -76,7 +77,7 @@ type Props = {
 type State = {
   id: string,
   navigatorUID: string,
-  drawerItems: Array<ExNavigationDrawerItem>,
+  drawerItems: Array<ExNavigationDrawerItem, ExNavigationDrawerChild>,
   parentNavigatorUID: string,
   renderedItemKeys: Array<string>,
 };
@@ -258,33 +259,43 @@ class ExNavigationDrawer extends PureComponent<any, Props, State> {
   _parseDrawerItems(props) {
     const drawerItems = Children.map(props.children, (child, index) => {
       invariant(
-        child.type === ExNavigationDrawerItem,
-        'All children of DrawerNavigation must be DrawerNavigationItems.',
+        child.type === ExNavigationDrawerItem || child.type === ExNavigationDrawerChild,
+        'All children of DrawerNavigation must be DrawerNavigationItems or DrawerNavigationChilds.',
       );
 
-      const drawerItemProps = child.props;
+      if (child.type === ExNavigationDrawerChild) {
+        const drawerChildProps = child.props;
 
-      let drawerItem = {
-        ..._.omit(drawerItemProps, ['children']),
-      };
+        let drawerItem = {
+          drawerChildren: drawerChildProps.children,
+        };
 
-      if (Children.count(drawerItemProps.children) > 0) {
-        drawerItem.element = Children.only(drawerItemProps.children);
-      }
+        return drawerItem;
+      } else {
+        const drawerItemProps = child.props;
 
-      const drawerItemOnPress = () => {
-        this._setActiveItem(drawerItemProps.id, index);
-      };
+        let drawerItem = {
+          ..._.omit(drawerItemProps, ['children']),
+        };
 
-      if (typeof drawerItemProps.onPress === 'function') {
-        drawerItem.onPress = drawerItem.onPress.bind(this, drawerItemOnPress);
-      } else {
-        drawerItem.onPress = drawerItemOnPress;
-      }
+        if (Children.count(drawerItemProps.children) > 0) {
+          drawerItem.element = Children.only(drawerItemProps.children);
+        }
 
-      drawerItem.onLongPress = drawerItemProps.onLongPress;
+        const drawerItemOnPress = () => {
+          this._setActiveItem(drawerItemProps.id, index);
+        };
 
-      return drawerItem;
+        if (typeof drawerItemProps.onPress === 'function') {
+          drawerItem.onPress = drawerItem.onPress.bind(this, drawerItemOnPress);
+        } else {
+          drawerItem.onPress = drawerItemOnPress;
+        }
+
+        drawerItem.onLongPress = drawerItemProps.onLongPress;
+
+        return drawerItem;
+      }
     });
 
     this.setState({

src/drawer/ExNavigationDrawerChild.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default class ExNavigationDrawerChild extends React.Component {
+  render() {
+    return null;
+  }
+}

src/drawer/ExNavigationDrawerLayout.js

@@ -76,12 +76,16 @@ export default class ExNavigationDrawerLayout extends React.Component {
     }
 
     return this.props.items.map((item, index) => {
-      let { renderIcon, renderTitle, renderRight } = item;
+      let { drawerChildren, renderIcon, renderTitle, renderRight } = item;
       let isSelected = this.props.selectedItem === item.id;
       const icon = renderIcon && renderIcon(isSelected);
       const title = renderTitle && renderTitle(isSelected);
       const rightElement = renderRight && renderRight(isSelected);
 
+      if (drawerChildren) {
+        return React.createElement(View, {key: index}, drawerChildren);
+      }
+
       if (item.showsTouches !== false) {
         return (
           <TouchableNativeFeedbackSafe