Add docs page for the new ReanimatedDrawerLayout component (#3188)

## Description

This PR adds documentation page for the new `ReanimatedDrawerLayout`
component.

wait for
#3146

## Test plan

- open the documentation page for `ReanimatedDrawerLayout`

docs/docs/components/reanimated-drawer-layout.mdx

@@ -0,0 +1,201 @@
+---
+id: reanimated-drawer-layout
+title: Reanimated Drawer Layout
+sidebar_label: Reanimated Drawer Layout
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Cross-platform replacement for the React Native's [DrawerLayoutAndroid](http://reactnative.dev/docs/drawerlayoutandroid.html) component.  
+For detailed usage of standard parameters, please refer to the [React Native docs](http://reactnative.dev/docs/drawerlayoutandroid.html).
+
+### Usage:
+
+To use it, import it in the following way:
+
+```js
+import ReanimatedDrawerLayout from 'react-native-gesture-handler/ReanimatedDrawerLayout';
+```
+
+## Properties:
+
+### `drawerType`
+
+specifies the way the drawer will be displayed.
+Accepts values of the `DrawerPosition` enum. Defaults to `FRONT`.
+
+- `FRONT` the drawer will be displayed above the content view.
+- `BACK` the drawer will be displayed below the content view, revealed by sliding away the content view.
+- `SLIDE` the drawer will appear attached to the content view, opening it slides both the drawer and the content view.
+
+| `FRONT`                                               | `BACK`                                               | `SLIDE`                                               |
+| ----------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- |
+| <img src={useBaseUrl('gifs/new-drawer-front.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-back.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-slide.gif')} /> |
+
+### `edgeWidth`
+
+width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer.
+
+### `hideStatusBar`
+
+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.
+
+### `statusBarAnimation`
+
+a string with possible values: `slide`, `none` or `fade`. Defaults to `slide`.
+May be used in combination with `hideStatusBar` to select the animation used for hiding the status bar.
+See [StatusBar API](http://reactnative.dev/docs/statusbar.html#statusbaranimation) docs.
+
+### `overlayColor`
+
+color of the background overlay on top of the content window when the drawer is `open`.  
+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)`.
+
+### `renderNavigationView`
+
+a renderer function for the drawer component, provided with a `progress` parameter.
+
+-  `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
+    - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
+    - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
+
+### `onDrawerClose`
+
+a function which is called when the drawer has been closed.
+
+### `onDrawerOpen`
+
+a function which is called when the drawer has been opened.
+
+### `onDrawerSlide`
+
+a function which is called when drawer is moving or animating, provided with a `progress` parameter.
+
+-  `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
+    - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
+    - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
+
+### `onDrawerStateChanged`
+
+a function which is called when the status of the drawer changes. It takes two arguments:
+
+- `newState` - interaction state of the drawer. It can be one of the following:
+  - `DrawerState.IDLE`
+  - `DrawerState.DRAGGING`
+  - `DrawerState.SETTLING`
+- `drawerWillShow` - `true` when `drawer` started animating to `open` position, `false` otherwise.
+
+### `enableTrackpadTwoFingerGesture` (iOS only)
+
+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.
+
+### `children`
+
+either a component that's rendered in the content view or a function.
+If `children` is a function, it is provided with a `progress` parameter.
+
+-  `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
+    - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
+    - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
+
+### `mouseButton(value: MouseButton)` (Web & Android only)
+
+allows users to choose which mouse button should handler respond to.
+The enum `MouseButton` consists of the following predefined fields:
+
+- `LEFT`
+- `RIGHT`
+- `MIDDLE`
+- `BUTTON_4`
+- `BUTTON_5`
+- `ALL`
+
+Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Defaults to `MouseButton.LEFT`.
+
+### `enableContextMenu(value: boolean)` (Web only)
+
+specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Defaults to `false`.
+
+## Methods
+
+### `openDrawer(options)`
+
+`openDrawer` accepts an optional `options` parameter, which is an object with the following optional properties:
+
+- `initialVelocity` - the initial velocity of the object attached to the spring. Defaults to `0`.
+- `animationSpeed` - controls speed of the animation. Defaults to `1`.
+
+### `closeDrawer(options)`
+
+`closeDrawer` accepts an optional `options` parameter, which is an object with the following optional properties:
+
+- `initialVelocity` - initial velocity of the object attached to the spring. Defaults to `0`.
+- `animationSpeed` - controls speed of the animation. Defaults to `1`.
+
+## Example:
+
+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.
+
+```js
+import React, { useRef } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import ReanimatedDrawerLayout, {
+  DrawerType,
+  DrawerPosition,
+  DrawerLayoutMethods,
+} from 'react-native-gesture-handler/ReanimatedDrawerLayout';
+
+const DrawerPage = () => {
+  return (
+    <View style={styles.drawerContainer}>
+      <Text>Lorem ipsum</Text>
+    </View>
+  );
+};
+
+export default function ReanimatedDrawerExample() {
+  const drawerRef = useRef < DrawerLayoutMethods > null;
+  const tapGesture = Gesture.Tap()
+    .runOnJS(true)
+    .onStart(() => drawerRef.current?.openDrawer());
+
+  return (
+    <ReanimatedDrawerLayout
+      ref={drawerRef}
+      renderNavigationView={() => <DrawerPage />}
+      drawerPosition={DrawerPosition.LEFT}
+      drawerType={DrawerType.FRONT}>
+      <View style={styles.innerContainer}>
+        <GestureDetector gesture={tapGesture}>
+          <View style={styles.box}>
+            <Text>Open drawer</Text>
+          </View>
+        </GestureDetector>
+      </View>
+    </ReanimatedDrawerLayout>
+  );
+}
+
+const styles = StyleSheet.create({
+  drawerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'pink',
+  },
+  innerContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 20,
+  },
+  box: {
+    padding: 20,
+    backgroundColor: 'pink',
+  },
+});
+```