From df67393afe661117e3e4b78fef014f28c7f6c248 Mon Sep 17 00:00:00 2001
From: Daniel Friesen <daniel@nadir-seen-fire.com>
Date: Wed, 9 Nov 2016 23:33:45 -0800
Subject: [PATCH] Add DrawerNavigationChild to insert non-item children into
 DrawerNavigation

---
 README.md                                     |  9 ++++
 example/components/DrawerNavigationExample.js | 10 ++++
 src/ExNavigation.js                           |  1 +
 src/drawer/ExNavigationDrawer.js              | 51 +++++++++++--------
 src/drawer/ExNavigationDrawerChild.js         |  7 +++
 src/drawer/ExNavigationDrawerLayout.js        |  6 ++-
 6 files changed, 63 insertions(+), 21 deletions(-)
 create mode 100644 src/drawer/ExNavigationDrawerChild.js

diff --git a/README.md b/README.md
index fbc50a7..820f281 100644
--- a/README.md
+++ b/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'
   },
diff --git a/example/components/DrawerNavigationExample.js b/example/components/DrawerNavigationExample.js
index 69d92fd..f09ede6 100644
--- a/example/components/DrawerNavigationExample.js
+++ b/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',
diff --git a/src/ExNavigation.js b/src/ExNavigation.js
index 3f09edd..250c553 100644
--- a/src/ExNavigation.js
+++ b/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';
 
diff --git a/src/drawer/ExNavigationDrawer.js b/src/drawer/ExNavigationDrawer.js
index 9086eae..f8e6f14 100644
--- a/src/drawer/ExNavigationDrawer.js
+++ b/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({
diff --git a/src/drawer/ExNavigationDrawerChild.js b/src/drawer/ExNavigationDrawerChild.js
new file mode 100644
index 0000000..f18c87a
--- /dev/null
+++ b/src/drawer/ExNavigationDrawerChild.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default class ExNavigationDrawerChild extends React.Component {
+  render() {
+    return null;
+  }
+}
diff --git a/src/drawer/ExNavigationDrawerLayout.js b/src/drawer/ExNavigationDrawerLayout.js
index b38d4b7..c29df3f 100644
--- a/src/drawer/ExNavigationDrawerLayout.js
+++ b/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