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
Cross-platform replacement for the React Native's [DrawerLayoutAndroid](http://reactnative.dev/docs/drawerlayoutandroid.html) component.
10
-
For detailed usage of standard parameters, please refer to the [React Native docs](http://reactnative.dev/docs/drawerlayoutandroid.html).
9
+
:::info
10
+
This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html).
11
+
:::
11
12
12
-
### Usage:
13
+
To use `ReanimatedDrawerLayout`, first ensure that Reanimated is installed and that your app is wrapped in `GestureHandlerRootView`. You can then import it as follows:
Width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer.
57
+
58
+
### hideStatusBar
59
+
60
+
```ts
61
+
hideStatusBar?:boolean;
62
+
```
63
+
64
+
When set to `true`, drawer component will use [StatusBar API](http://reactnative.dev/docs/statusbar.html) to hide the OS status bar when the drawer is dragged or idle in the `open` position.
36
65
37
-
width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer.
66
+
### statusBarAnimation
38
67
39
-
### `hideStatusBar`
68
+
<CollapsibleCode
69
+
label="Show composed types definitions"
70
+
expandedLabel="Hide composed types definitions"
71
+
lineBounds={[0, 1]}
72
+
collapsed={false}
73
+
src={`
74
+
statusBarAnimation?: StatusBarAnimation;
40
75
41
-
a boolean value. When set to `true`, drawer component will use [StatusBar API](http://reactnative.dev/docs/statusbar.html) to hide the OS status bar when the drawer is dragged or idle in the `open` position.
76
+
export type StatusBarAnimation = 'none' | 'fade' | 'slide';
77
+
`}/>
42
78
43
-
### `statusBarAnimation`
79
+
May be used in combination with [`hideStatusBar`](#hidestatusbar) to select the animation used for hiding the status bar.
80
+
See [StatusBar API](http://reactnative.dev/docs/statusbar.html#statusbaranimation) docs. Defaults to `slide`.
44
81
45
-
a string with possible values: `slide`, `none` or `fade`. Defaults to `slide`.
46
-
May be used in combination with `hideStatusBar` to select the animation used for hiding the status bar.
47
-
See [StatusBar API](http://reactnative.dev/docs/statusbar.html#statusbaranimation) docs.
82
+
### overlayColor
48
83
49
-
### `overlayColor`
84
+
```ts
85
+
overlayColor?:string;
86
+
```
50
87
51
-
color of the background overlay on top of the content window when the drawer is `open`.
88
+
Color of the background overlay on top of the content window when the drawer is `open`.
52
89
This color's opacity animates from 0% to 100% as the drawer transitions from closed to open. Defaults to `rgba(0, 0, 0, 0.7)`.
53
90
54
-
### `renderNavigationView`
91
+
### renderNavigationView
55
92
56
-
a renderer function for the drawer component, provided with a `progress` parameter.
93
+
```ts
94
+
renderNavigationView: (
95
+
progressAnimatedValue: SharedValue<number>
96
+
) =>ReactNode;
97
+
```
98
+
A renderer function for the drawer component is provided with a `progress` parameter called `progressAnimatedValue`, which is a [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) indicating the progress of the drawer's opening or closing animation. This value is `0` when the drawer is fully closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node).
57
99
58
-
-`progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
59
-
- equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
60
-
- can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
100
+
### onDrawerClose
61
101
62
-
### `onDrawerClose`
102
+
```ts
103
+
onDrawerClose?: () =>void;
104
+
```
63
105
64
-
a function which is called when the drawer has been closed.
106
+
A function which is called when the drawer has been closed.
65
107
66
-
### `onDrawerOpen`
108
+
### onDrawerOpen
67
109
68
-
a function which is called when the drawer has been opened.
110
+
```ts
111
+
onDrawerOpen?: () =>void;
112
+
```
69
113
70
-
### `onDrawerSlide`
114
+
A function which is called when the drawer has been opened.
71
115
72
-
a function which is called when drawer is moving or animating, provided with a `progress` parameter.
116
+
### onDrawerSlide
73
117
74
-
-`progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
75
-
- equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
76
-
- can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
118
+
```ts
119
+
onDrawerSlide?: (position:number) =>void;
120
+
```
77
121
78
-
### `onDrawerStateChanged`
122
+
A function is called when the drawer is moving or animating, provided with a `position` parameter. This `position` value indicates the progress of the drawer's opening or closing animation. It equals `0` when the drawer is closed and `1` when the drawer is fully opened. This value can be utilized by the drawer component to animate its children as the drawer opens or closes.
79
123
80
-
a function which is called when the status of the drawer changes. It takes two arguments:
124
+
### onDrawerStateChanged
81
125
82
-
-`newState` - interaction state of the drawer. It can be one of the following:
83
-
-`DrawerState.IDLE`
84
-
-`DrawerState.DRAGGING`
85
-
-`DrawerState.SETTLING`
86
-
-`drawerWillShow` - `true` when `drawer` started animating to `open` position, `false` otherwise.
126
+
<CollapsibleCode
127
+
label="Show composed types definitions"
128
+
expandedLabel="Hide composed types definitions"
129
+
lineBounds={[0, 4]}
130
+
src={`
131
+
onDrawerStateChanged?: (
132
+
newState: DrawerState,
133
+
drawerWillShow: boolean
134
+
) => void;
87
135
88
-
### `enableTrackpadTwoFingerGesture` (iOS only)
136
+
export enum DrawerState {
137
+
IDLE,
138
+
DRAGGING,
139
+
SETTLING,
140
+
}
141
+
`}/>
89
142
90
-
enables two-finger gestures on supported devices, for example iPads with trackpads.
91
-
If not enabled, the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
143
+
A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.
92
144
93
-
### `children`
145
+
### enableTrackpadTwoFingerGesture (iOS only)
94
146
95
-
either a component that's rendered in the content view or a function.
96
-
If `children` is a function, it is provided with a `progress` parameter.
147
+
```ts
148
+
enableTrackpadTwoFingerGesture?:boolean;
149
+
```
97
150
98
-
-`progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
99
-
- equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
100
-
- can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
151
+
Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Defaults to `MouseButton.LEFT`.
160
+
Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter - [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node).
Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
182
+
183
+
184
+
### enableContextMenu (Web only)
185
+
186
+
```ts
187
+
enableContextMenu: boolean;
188
+
```
189
+
190
+
Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false` if [`MouseButton.RIGHT`](#mousebutton-web--android-only) is specified.
117
191
118
-
specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Defaults to `false`.
119
192
120
193
## Methods
121
194
122
-
### `openDrawer(options)`
195
+
Using a reference to `ReanimatedDrawerLayout` allows you to manually trigger the opening and closing of the component.
123
196
124
-
`openDrawer` accepts an optional `options` parameter, which is an object with the following optional properties:
See the [reanimated drawer layout example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/release_tests/reanimatedDrawerLayout/index.tsx) from GestureHandler example app.
224
+
Allows to manually close the drawer.
139
225
140
-
```js
226
+
## Example
227
+
228
+
Example of a `ReanimatedDrawerLayout` component can be found in [Gesture Handler repository](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/new_api/components/drawer/index.tsx).
229
+
230
+
231
+
<CollapsibleCode
232
+
label="Show full example"
233
+
expandedLabel="Hide full example"
234
+
lineBounds={[14, 49]}
235
+
src={`
141
236
import React, { useRef } from 'react';
142
237
import { StyleSheet, Text, View } from 'react-native';
0 commit comments