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) => ( + + + +); + +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 }); - +