Skip to content

Commit 093994e

Browse files
cainaleaouksourcecode911
authored andcommitted
Update documentation regarding DrawerNavigator customisation (react-navigation#646)
* Update documentation regarding `DrawerNavigator` customisation * Updated docs as requested in the PR.
1 parent 637a4d2 commit 093994e

File tree

1 file changed

+20
-2
lines changed

1 file changed

+20
-2
lines changed

docs/api/navigators/DrawerNavigator.md

+20-2
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ The route configs object is a mapping from route name to a route config, which t
8888

8989
- `drawerWidth` - Width of the drawer
9090
- `drawerPosition` - Options are `left` or `right`. Default is `left` position.
91-
- `contentComponent` - Component to use to render the navigation items. Receives the `navigation` prop for the drawer. Defaults to `DrawerView.Items`.
91+
- `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.
9292
- `contentOptions` - Configure the drawer content, see below.
9393

9494
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:
9898
- `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
9999
- `backBehavior` - Should the back button cause switch to the initial route? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
100100

101+
### Providing a custom `contentComponent`
102+
103+
You can easily override the default component used by `react-navigation`:
104+
105+
```js
106+
const CustomDrawerContentComponent = (props) => (
107+
<View style={style.container}>
108+
<DrawerView.Items {...props} />
109+
</View>
110+
);
111+
112+
const styles = StyleSheet.create({
113+
container : {
114+
flex : 1,
115+
},
116+
});
117+
```
118+
101119
### `contentOptions` for `DrawerView.Items`
102120

103121
- `activeTintColor` - label and icon color of the active label
@@ -156,7 +174,7 @@ The navigator component created by `DrawerNavigator(...)` takes the following pr
156174
const DrawerNav = DrawerNavigator({
157175
// config
158176
});
159-
177+
160178
<DrawerNav
161179
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
162180
/>

0 commit comments

Comments
 (0)