From 498f329005f8751be7c939f714229cb1124a6bd0 Mon Sep 17 00:00:00 2001
From: Cai Leao <cainaleaouk@users.noreply.github.com>
Date: Wed, 22 Mar 2017 19:09:10 +0000
Subject: [PATCH] Update documentation regarding `DrawerNavigator`
 customisation (#646)

* Update documentation regarding `DrawerNavigator` customisation

* Updated docs as requested in the PR.
---
 docs/api/navigators/DrawerNavigator.md | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/api/navigators/DrawerNavigator.md b/docs/api/navigators/DrawerNavigator.md
index 29744d6e..775b9ac5 100644
--- a/docs/api/navigators/DrawerNavigator.md
+++ b/docs/api/navigators/DrawerNavigator.md
@@ -88,7 +88,7 @@ The route configs object is a mapping from route name to a route config, which t
 
 - `drawerWidth` - Width of the drawer
 - `drawerPosition` - Options are `left` or `right`. Default is `left` position.
-- `contentComponent` - Component to use to render the navigation items. Receives the `navigation` prop for the drawer. Defaults to `DrawerView.Items`.
+- `contentComponent` - Component used to render the content of the drawer, for example, navigation items. Receives the `navigation` prop for the drawer. Defaults to `DrawerView.Items`. For more information, see below.
 - `contentOptions` - Configure the drawer content, see below.
 
 Several options get passed to the underlying router to modify navigation logic:
@@ -98,6 +98,24 @@ Several options get passed to the underlying router to modify navigation logic:
 - `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
 - `backBehavior` - Should the back button cause switch to the initial route? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
 
+### Providing a custom `contentComponent`
+
+You can easily override the default component used by `react-navigation`:
+
+```js
+const CustomDrawerContentComponent = (props) => (
+  <View style={style.container}>
+    <DrawerView.Items {...props} />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container : {
+    flex : 1,
+  },
+});
+```
+
 ### `contentOptions` for `DrawerView.Items`
 
 - `activeTintColor` - label and icon color of the active label
@@ -156,7 +174,7 @@ The navigator component created by `DrawerNavigator(...)` takes the following pr
  const DrawerNav = DrawerNavigator({
    // config
  });
- 
+
  <DrawerNav
    screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
  />