Skip to content

Commit 0e5c3aa

Browse files
satya164satya164
committed
Update drawer layout docs
1 parent 7f13def commit 0e5c3aa

File tree

3 files changed

+57
-70
lines changed

3 files changed

+57
-70
lines changed

‎versioned_docs/version-6.x/drawer-layout.md

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -105,35 +105,35 @@ The package exports a `Drawer` component which is the one you'd use to render th
105105

106106
### `Drawer`
107107

108-
Component responsible for rendering a drawer with animations and gestures.
108+
The `Drawer` component is responsible for rendering a drawer sidebar with animations and gestures.
109109

110-
#### Drawer Props
110+
It accepts the following props:
111111

112-
##### `open`
112+
#### `open`
113113

114114
Whether the drawer is open or not.
115115

116-
##### `onOpen`
116+
#### `onOpen`
117117

118118
Callback which is called when the drawer is opened.
119119

120-
##### `onClose`
120+
#### `onClose`
121121

122122
Callback which is called when the drawer is closed.
123123

124-
##### `renderDrawerContent`
124+
#### `renderDrawerContent`
125125

126126
Callback which returns a react element to render as the content of the drawer.
127127

128-
##### `layout`
128+
#### `layout`
129129

130130
Object containing the layout of the container. Defaults to the dimensions of the application's window.
131131

132-
##### `drawerPosition`
132+
#### `drawerPosition`
133133

134134
Position of the drawer on the screen. Defaults to `right` in RTL mode, otherwise `left`.
135135

136-
##### `drawerType`
136+
#### `drawerType`
137137

138138
Type of the drawer. It determines how the drawer looks and animates.
139139

@@ -144,19 +144,19 @@ Type of the drawer. It determines how the drawer looks and animates.
144144

145145
Defaults to `slide` on iOS and `front` on other platforms.
146146

147-
##### `drawerStyle`
147+
#### `drawerStyle`
148148

149149
Style object for the drawer. You can pass a custom background color for drawer or a custom width for the drawer.
150150

151-
##### `overlayStyle`
151+
#### `overlayStyle`
152152

153153
Style object for the overlay.
154154

155-
##### `hideStatusBarOnOpen`
155+
#### `hideStatusBarOnOpen`
156156

157157
Whether to hide the status bar when the drawer is open. Defaults to `false`.
158158

159-
##### `keyboardDismissMode`
159+
#### `keyboardDismissMode`
160160

161161
Whether to dismiss the keyboard when the drawer is open. Supported values are:
162162

@@ -165,7 +165,7 @@ Whether to dismiss the keyboard when the drawer is open. Supported values are:
165165

166166
Defaults to `on-drag`.
167167

168-
##### `statusBarAnimation`
168+
#### `statusBarAnimation`
169169

170170
Animation to use when the status bar is hidden. Supported values are:
171171

@@ -175,43 +175,43 @@ Animation to use when the status bar is hidden. Supported values are:
175175

176176
Use it in combination with `hideStatusBarOnOpen`.
177177

178-
##### `swipeEnabled`
178+
#### `swipeEnabled`
179179

180180
Whether to enable swipe gestures to open the drawer. Defaults to `true`.
181181

182182
Swipe gestures are only supported on iOS and Android.
183183

184-
##### `swipeEdgeWidth`
184+
#### `swipeEdgeWidth`
185185

186186
How far from the edge of the screen the swipe gesture should activate. Defaults to `32`.
187187

188188
This is only supported on iOS and Android.
189189

190-
##### `swipeMinDistance`
190+
#### `swipeMinDistance`
191191

192192
Minimum swipe distance that should activate opening the drawer. Defaults to `60`.
193193

194194
This is only supported on iOS and Android.
195195

196-
##### `swipeMinVelocity`
196+
#### `swipeMinVelocity`
197197

198198
Minimum swipe velocity that should activate opening the drawer. Defaults to `500`.
199199

200200
This is only supported on iOS and Android.
201201

202-
##### `gestureHandlerProps`
202+
#### `gestureHandlerProps`
203203

204204
Props to pass to the underlying pan gesture handler.
205205

206206
This is only supported on iOS and Android.
207207

208-
##### `children`
208+
#### `children`
209209

210210
Content that the drawer should wrap.
211211

212212
### `useDrawerProgress`
213213

214-
The `useDrawerProgress` hook returns a Reanimated SharedValue (with modern implementation) or Reanimated Node (with legacy implementation) which represents the progress of the drawer. It can be used to animate the content of the screen.
214+
The `useDrawerProgress` hook returns a Reanimated `SharedValue` (with modern implementation) or Reanimated Node (with legacy implementation) which represents the progress of the drawer. It can be used to animate the content of the screen.
215215

216216
Example with modern implementation:
217217

‎versioned_docs/version-7.x/drawer-layout.md

Lines changed: 29 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: React Native Drawer Layout
44
sidebar_label: Drawer Layout
55
---
66

7-
A cross-platform Drawer component for React Native implemented using [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
7+
A cross-platform Drawer component for React Native implemented using [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) on native platforms and CSS transitions on Web.
88

99
<video playsInline autoPlay muted loop>
1010
<source src="/assets/7.x/drawer-layout.mp4" />
@@ -55,7 +55,7 @@ Then, you need to install and configure the libraries that are required by the d
5555
import './gesture-handler';
5656
```
5757

58-
Since the drawer layout doesn't use `react-native-gesture-handler` on the web, this avoids unnecessarily increasing the bundle size.
58+
Since the drawer layout doesn't use `react-native-gesture-handler` on Web, this avoids unnecessarily increasing the bundle size.
5959

6060
:::warning
6161

@@ -106,35 +106,35 @@ The package exports a `Drawer` component which is the one you'd use to render th
106106

107107
### `Drawer`
108108

109-
Component responsible for rendering a drawer with animations and gestures.
109+
The `Drawer` component is responsible for rendering a drawer sidebar with animations and gestures.
110110

111-
#### Drawer Props
111+
It accepts the following props:
112112

113-
##### `open`
113+
#### `open`
114114

115115
Whether the drawer is open or not.
116116

117-
##### `onOpen`
117+
#### `onOpen`
118118

119119
Callback which is called when the drawer is opened.
120120

121-
##### `onClose`
121+
#### `onClose`
122122

123123
Callback which is called when the drawer is closed.
124124

125-
##### `renderDrawerContent`
125+
#### `renderDrawerContent`
126126

127127
Callback which returns a react element to render as the content of the drawer.
128128

129-
##### `layout`
129+
#### `layout`
130130

131131
Object containing the layout of the container. Defaults to the dimensions of the application's window.
132132

133-
##### `drawerPosition`
133+
#### `drawerPosition`
134134

135135
Position of the drawer on the screen. Defaults to `right` in RTL mode, otherwise `left`.
136136

137-
##### `drawerType`
137+
#### `drawerType`
138138

139139
Type of the drawer. It determines how the drawer looks and animates.
140140

@@ -145,19 +145,19 @@ Type of the drawer. It determines how the drawer looks and animates.
145145

146146
Defaults to `slide` on iOS and `front` on other platforms.
147147

148-
##### `drawerStyle`
148+
#### `drawerStyle`
149149

150150
Style object for the drawer. You can pass a custom background color for drawer or a custom width for the drawer.
151151

152-
##### `overlayStyle`
152+
#### `overlayStyle`
153153

154154
Style object for the overlay.
155155

156-
##### `hideStatusBarOnOpen`
156+
#### `hideStatusBarOnOpen`
157157

158158
Whether to hide the status bar when the drawer is open. Defaults to `false`.
159159

160-
##### `keyboardDismissMode`
160+
#### `keyboardDismissMode`
161161

162162
Whether to dismiss the keyboard when the drawer is open. Supported values are:
163163

@@ -166,7 +166,7 @@ Whether to dismiss the keyboard when the drawer is open. Supported values are:
166166

167167
Defaults to `on-drag`.
168168

169-
##### `statusBarAnimation`
169+
#### `statusBarAnimation`
170170

171171
Animation to use when the status bar is hidden. Supported values are:
172172

@@ -176,43 +176,43 @@ Animation to use when the status bar is hidden. Supported values are:
176176

177177
Use it in combination with `hideStatusBarOnOpen`.
178178

179-
##### `swipeEnabled`
179+
#### `swipeEnabled`
180180

181181
Whether to enable swipe gestures to open the drawer. Defaults to `true`.
182182

183183
Swipe gestures are only supported on iOS and Android.
184184

185-
##### `swipeEdgeWidth`
185+
#### `swipeEdgeWidth`
186186

187187
How far from the edge of the screen the swipe gesture should activate. Defaults to `32`.
188188

189189
This is only supported on iOS and Android.
190190

191-
##### `swipeMinDistance`
191+
#### `swipeMinDistance`
192192

193193
Minimum swipe distance that should activate opening the drawer. Defaults to `60`.
194194

195195
This is only supported on iOS and Android.
196196

197-
##### `swipeMinVelocity`
197+
#### `swipeMinVelocity`
198198

199199
Minimum swipe velocity that should activate opening the drawer. Defaults to `500`.
200200

201201
This is only supported on iOS and Android.
202202

203-
##### `gestureHandlerProps`
203+
#### `gestureHandlerProps`
204204

205205
Props to pass to the underlying pan gesture handler.
206206

207207
This is only supported on iOS and Android.
208208

209-
##### `children`
209+
#### `children`
210210

211211
Content that the drawer should wrap.
212212

213213
### `useDrawerProgress`
214214

215-
The `useDrawerProgress` hook returns a Reanimated SharedValue (with modern implementation) or Reanimated Node (with legacy implementation) which represents the progress of the drawer. It can be used to animate the content of the screen.
215+
The `useDrawerProgress` hook returns a Reanimated `SharedValue` which represents the progress of the drawer. It can be used to animate the content of the screen.
216216

217217
Example with modern implementation:
218218

@@ -239,31 +239,6 @@ function MyComponent() {
239239
}
240240
```
241241

242-
Example with legacy implementation:
243-
244-
```js
245-
import { Animated } from 'react-native-reanimated';
246-
import { useDrawerProgress } from 'react-native-drawer-layout';
247-
248-
// ...
249-
250-
function MyComponent() {
251-
const progress = useDrawerProgress();
252-
253-
// If you are on react-native-reanimated 1.x, use `Animated.interpolate` instead of `Animated.interpolateNode`
254-
const translateX = Animated.interpolateNode(progress, {
255-
inputRange: [0, 1],
256-
outputRange: [-100, 0],
257-
});
258-
259-
return (
260-
<Animated.View style={{ transform: [{ translateX }] }}>
261-
{/* ... */}
262-
</Animated.View>
263-
);
264-
}
265-
```
266-
267242
If you are using class components, you can use the `DrawerProgressContext` to get the progress value.
268243

269244
```js
@@ -281,3 +256,9 @@ class MyComponent extends React.Component {
281256
}
282257
}
283258
```
259+
260+
:::warning
261+
262+
The `useDrawerProgress` hook (or `DrawerProgressContext`) will return a mock value on Web since Reanimated is not used on Web. The mock value can only represent the open state of the drawer (`0` when closed, `1` when open), and not the progress of the drawer.
263+
264+
:::

‎versioned_docs/version-7.x/drawer-navigator.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -762,7 +762,13 @@ export default function App() {
762762
</TabItem>
763763
</Tabs>
764764

765-
This hook is not supported on Web.
765+
If you are using class components, you can use the `DrawerProgressContext` to get the progress value.
766+
767+
:::warning
768+
769+
The `useDrawerProgress` hook (or `DrawerProgressContext`) will return a mock value on Web since Reanimated is not used on Web. The mock value can only represent the open state of the drawer (`0` when closed, `1` when open), and not the progress of the drawer.
770+
771+
:::
766772

767773
#### `useDrawerStatus`
768774

0 commit comments

Comments
 (0)