|
| 1 | +--- |
| 2 | +id: reanimated-drawer-layout |
| 3 | +title: Reanimated Drawer Layout |
| 4 | +sidebar_label: Reanimated Drawer Layout |
| 5 | +--- |
| 6 | + |
| 7 | +import useBaseUrl from '@docusaurus/useBaseUrl'; |
| 8 | + |
| 9 | +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). |
| 11 | + |
| 12 | +### Usage: |
| 13 | + |
| 14 | +To use it, import it in the following way: |
| 15 | + |
| 16 | +```js |
| 17 | +import ReanimatedDrawerLayout from 'react-native-gesture-handler/ReanimatedDrawerLayout'; |
| 18 | +``` |
| 19 | + |
| 20 | +## Properties: |
| 21 | + |
| 22 | +### `drawerType` |
| 23 | + |
| 24 | +specifies the way the drawer will be displayed. |
| 25 | +Accepts values of the `DrawerPosition` enum. Defaults to `FRONT`. |
| 26 | + |
| 27 | +- `FRONT` the drawer will be displayed above the content view. |
| 28 | +- `BACK` the drawer will be displayed below the content view, revealed by sliding away the content view. |
| 29 | +- `SLIDE` the drawer will appear attached to the content view, opening it slides both the drawer and the content view. |
| 30 | + |
| 31 | +| `FRONT` | `BACK` | `SLIDE` | |
| 32 | +| ----------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- | |
| 33 | +| <img src={useBaseUrl('gifs/new-drawer-front.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-back.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-slide.gif')} /> | |
| 34 | + |
| 35 | +### `edgeWidth` |
| 36 | + |
| 37 | +width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer. |
| 38 | + |
| 39 | +### `hideStatusBar` |
| 40 | + |
| 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. |
| 42 | + |
| 43 | +### `statusBarAnimation` |
| 44 | + |
| 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. |
| 48 | + |
| 49 | +### `overlayColor` |
| 50 | + |
| 51 | +color of the background overlay on top of the content window when the drawer is `open`. |
| 52 | +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 | + |
| 54 | +### `renderNavigationView` |
| 55 | + |
| 56 | +a renderer function for the drawer component, provided with a `progress` parameter. |
| 57 | + |
| 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 |
| 61 | + |
| 62 | +### `onDrawerClose` |
| 63 | + |
| 64 | +a function which is called when the drawer has been closed. |
| 65 | + |
| 66 | +### `onDrawerOpen` |
| 67 | + |
| 68 | +a function which is called when the drawer has been opened. |
| 69 | + |
| 70 | +### `onDrawerSlide` |
| 71 | + |
| 72 | +a function which is called when drawer is moving or animating, provided with a `progress` parameter. |
| 73 | + |
| 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 |
| 77 | + |
| 78 | +### `onDrawerStateChanged` |
| 79 | + |
| 80 | +a function which is called when the status of the drawer changes. It takes two arguments: |
| 81 | + |
| 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. |
| 87 | + |
| 88 | +### `enableTrackpadTwoFingerGesture` (iOS only) |
| 89 | + |
| 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. |
| 92 | + |
| 93 | +### `children` |
| 94 | + |
| 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. |
| 97 | + |
| 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 |
| 101 | + |
| 102 | +### `mouseButton(value: MouseButton)` (Web & Android only) |
| 103 | + |
| 104 | +allows users to choose which mouse button should handler respond to. |
| 105 | +The enum `MouseButton` consists of the following predefined fields: |
| 106 | + |
| 107 | +- `LEFT` |
| 108 | +- `RIGHT` |
| 109 | +- `MIDDLE` |
| 110 | +- `BUTTON_4` |
| 111 | +- `BUTTON_5` |
| 112 | +- `ALL` |
| 113 | + |
| 114 | +Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Defaults to `MouseButton.LEFT`. |
| 115 | + |
| 116 | +### `enableContextMenu(value: boolean)` (Web only) |
| 117 | + |
| 118 | +specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Defaults to `false`. |
| 119 | + |
| 120 | +## Methods |
| 121 | + |
| 122 | +### `openDrawer(options)` |
| 123 | + |
| 124 | +`openDrawer` accepts an optional `options` parameter, which is an object with the following optional properties: |
| 125 | + |
| 126 | +- `initialVelocity` - the initial velocity of the object attached to the spring. Defaults to `0`. |
| 127 | +- `animationSpeed` - controls speed of the animation. Defaults to `1`. |
| 128 | + |
| 129 | +### `closeDrawer(options)` |
| 130 | + |
| 131 | +`closeDrawer` accepts an optional `options` parameter, which is an object with the following optional properties: |
| 132 | + |
| 133 | +- `initialVelocity` - initial velocity of the object attached to the spring. Defaults to `0`. |
| 134 | +- `animationSpeed` - controls speed of the animation. Defaults to `1`. |
| 135 | + |
| 136 | +## Example: |
| 137 | + |
| 138 | +See the [reanimated drawer layout example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/release_tests/reanimatedDrawerLayout/index.tsx) from GestureHandler example app. |
| 139 | + |
| 140 | +```js |
| 141 | +import React, { useRef } from 'react'; |
| 142 | +import { StyleSheet, Text, View } from 'react-native'; |
| 143 | +import { Gesture, GestureDetector } from 'react-native-gesture-handler'; |
| 144 | + |
| 145 | +import ReanimatedDrawerLayout, { |
| 146 | + DrawerType, |
| 147 | + DrawerPosition, |
| 148 | + DrawerLayoutMethods, |
| 149 | +} from 'react-native-gesture-handler/ReanimatedDrawerLayout'; |
| 150 | + |
| 151 | +const DrawerPage = () => { |
| 152 | + return ( |
| 153 | + <View style={styles.drawerContainer}> |
| 154 | + <Text>Lorem ipsum</Text> |
| 155 | + </View> |
| 156 | + ); |
| 157 | +}; |
| 158 | + |
| 159 | +export default function ReanimatedDrawerExample() { |
| 160 | + const drawerRef = useRef < DrawerLayoutMethods > null; |
| 161 | + const tapGesture = Gesture.Tap() |
| 162 | + .runOnJS(true) |
| 163 | + .onStart(() => drawerRef.current?.openDrawer()); |
| 164 | + |
| 165 | + return ( |
| 166 | + <ReanimatedDrawerLayout |
| 167 | + ref={drawerRef} |
| 168 | + renderNavigationView={() => <DrawerPage />} |
| 169 | + drawerPosition={DrawerPosition.LEFT} |
| 170 | + drawerType={DrawerType.FRONT}> |
| 171 | + <View style={styles.innerContainer}> |
| 172 | + <GestureDetector gesture={tapGesture}> |
| 173 | + <View style={styles.box}> |
| 174 | + <Text>Open drawer</Text> |
| 175 | + </View> |
| 176 | + </GestureDetector> |
| 177 | + </View> |
| 178 | + </ReanimatedDrawerLayout> |
| 179 | + ); |
| 180 | +} |
| 181 | + |
| 182 | +const styles = StyleSheet.create({ |
| 183 | + drawerContainer: { |
| 184 | + flex: 1, |
| 185 | + justifyContent: 'center', |
| 186 | + alignItems: 'center', |
| 187 | + backgroundColor: 'pink', |
| 188 | + }, |
| 189 | + innerContainer: { |
| 190 | + flex: 1, |
| 191 | + backgroundColor: 'white', |
| 192 | + alignItems: 'center', |
| 193 | + justifyContent: 'center', |
| 194 | + gap: 20, |
| 195 | + }, |
| 196 | + box: { |
| 197 | + padding: 20, |
| 198 | + backgroundColor: 'pink', |
| 199 | + }, |
| 200 | +}); |
| 201 | +``` |
0 commit comments