You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/navigators/DrawerNavigator.md
+20-2
Original file line number
Diff line number
Diff line change
@@ -88,7 +88,7 @@ The route configs object is a mapping from route name to a route config, which t
88
88
89
89
-`drawerWidth` - Width of the drawer
90
90
-`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.
92
92
-`contentOptions` - Configure the drawer content, see below.
93
93
94
94
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:
98
98
-`paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
99
99
-`backBehavior` - Should the back button cause switch to the initial route? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
100
100
101
+
### Providing a custom `contentComponent`
102
+
103
+
You can easily override the default component used by `react-navigation`:
104
+
105
+
```js
106
+
constCustomDrawerContentComponent= (props) => (
107
+
<View style={style.container}>
108
+
<DrawerView.Items {...props} />
109
+
</View>
110
+
);
111
+
112
+
conststyles=StyleSheet.create({
113
+
container : {
114
+
flex :1,
115
+
},
116
+
});
117
+
```
118
+
101
119
### `contentOptions` for `DrawerView.Items`
102
120
103
121
-`activeTintColor` - label and icon color of the active label
@@ -156,7 +174,7 @@ The navigator component created by `DrawerNavigator(...)` takes the following pr
156
174
constDrawerNav=DrawerNavigator({
157
175
// config
158
176
});
159
-
177
+
160
178
<DrawerNav
161
179
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
0 commit comments