Add optional speed parameter to open/closeDrawer (software-mansion#1133)

## Description

I want to control the speed with which the drawer opens/closes.

Velocity does not seem to provide this functionality. 

Adjusting the Animation.spring `speed` parameter does. 

From the RN Animation docs here: https://reactnative.dev/docs/animated#spring

> speed: Controls speed of the animation. Default 12.
> ...
> velocity: The initial velocity of the object attached to the spring. Default 0 (object is at rest).


## Test plan

I manually tested the change my using different values for speed and comparing the results on device.

Co-authored-by: Jakub <[email protected]>

Author: 2 people

DrawerLayout.d.ts

@@ -41,6 +41,7 @@ declare module 'react-native-gesture-handler/DrawerLayout' {
 
   interface DrawerMovementOptionType {
     velocity?: number;
+    speed?: number;
   }
 
   export default class DrawerLayout extends React.Component<DrawerLayoutProperties> {

DrawerLayout.js

@@ -67,6 +67,7 @@ export type EventType = {
 
 export type DrawerMovementOptionType = {
   velocity?: number,
+  speed?: number,
 };
 
 export default class DrawerLayout extends Component<PropType, StateType> {
@@ -314,7 +315,12 @@ export default class DrawerLayout extends Component<PropType, StateType> {
       });
   };
 
-  _animateDrawer = (fromValue: ?number, toValue: number, velocity: number) => {
+  _animateDrawer = (
+    fromValue: ?number,
+    toValue: number,
+    velocity: number,
+    speed: ?number
+  ) => {
     this.state.dragX.setValue(0);
     this.state.touchX.setValue(
       this.props.drawerPosition === 'left' ? 0 : this.state.containerWidth
@@ -347,6 +353,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
       bounciness: 0,
       toValue,
       useNativeDriver: this.props.useNativeAnimations,
+      speed: speed ?? undefined,
     }).start(({ finished }) => {
       if (finished) {
         this._emitStateChanged(IDLE, willShow);

Example/horizontalDrawer/index.js

@@ -124,7 +124,7 @@ export default class Example extends Component {
             flipSide={() => this.setState({ fromLeft: !this.state.fromLeft })}
             nextType={() =>
               this.setState({ type: (this.state.type + 1) % TYPES.length })}
-            openDrawer={() => this.drawer.openDrawer()}
+            openDrawer={() => this.drawer.openDrawer({speed: 14})}
           />
         </DrawerLayout>
       </View>

docs/docs/component-drawer-layout.mdx

@@ -5,7 +5,7 @@ sidebar_label: DrawerLayout
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import GifGallery from '@site/components/GifGallery'
+import GifGallery from '@site/components/GifGallery';
 
 This is a cross-platform replacement for React Native's [DrawerLayoutAndroid](http://facebook.github.io/react-native/docs/drawerlayoutandroid.html) component. It provides a compatible API but allows for the component to be used on both Android and iOS. Please refer to [React Native docs](http://facebook.github.io/react-native/docs/drawerlayoutandroid.html) for the detailed usage for standard parameters.
 
@@ -26,18 +26,21 @@ On top of the standard list of parameters DrawerLayout has an additional set of
 possible values are: `front`, `back` or `slide` (default is `front`). It specifies the way the drawer will be displayed. When set to `front` the drawer will slide in and out along with the gesture and will display on top of the content view. When `back` is used the drawer displays behind the content view and can be revealed with gesture of pulling the content view to the side. Finally `slide` option makes the drawer appear like it is attached to the side of the content view; when you pull both content view and drawer will follow the gesture.
 
 Type `slide`:
+
 <GifGallery>
-  <img src={useBaseUrl("gifs/drawer-slide.gif")} width="280" />
+  <img src={useBaseUrl('gifs/drawer-slide.gif')} width="280" />
 </GifGallery>
 
 Type `front`:
+
 <GifGallery>
-  <img src={useBaseUrl("gifs/drawer-front.gif")} width="280" />
+  <img src={useBaseUrl('gifs/drawer-front.gif')} width="280" />
 </GifGallery>
 
 Type `back`:
+
 <GifGallery>
-  <img src={useBaseUrl("gifs/drawer-back.gif")} width="280" />
+  <img src={useBaseUrl('gifs/drawer-back.gif')} width="280" />
 </GifGallery>
 
 ### `edgeWidth`
@@ -80,6 +83,27 @@ Enables two-finger gestures on supported devices, for example iPads with trackpa
 
 component or function. Children is a component which is rendered by default and is wrapped by drawer. However, it could be also a render function which takes an Animated value as a parameter that indicates the progress of drawer opening/closing animation (progress value is 0 when closed and 1 when opened) is the same way like `renderNavigationView` prop.
 
+## Methods
+
+
+### `openDrawer(options)`
+
+`openDrawer` can take an optional `options` parameter which is an object, enabling further customization of the open animation.
+
+`options` has two optional properties:
+
+`velocity`: number, the initial velocity of the object attached to the spring. Default 0 (object is at rest).
+`speed`: number, controls speed of the animation. Default 12.
+
+### `closeDrawer(options)`
+
+`closeDrawer` can take an optional `options` parameter which is an object, enabling further customization of the close animation.
+
+`options` has two optional properties:
+
+`velocity`: number, the initial velocity of the object attached to the spring. Default 0 (object is at rest).
+`speed`: number, controls speed of the animation. Default 12.
+
 ## Example:
 
 See the [drawer example](https://github.com/software-mansion/react-native-gesture-handler/blob/master/Example/horizontalDrawer/index.js) from [GestureHandler Example App](example.md) or view it directly on your phone by visiting [our expo demo](https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo).