docs: Drawer v7. (#1356)

* docs: Adeed videos for Drawer's options

* docs: Adeed screenshots for Drawer's options

* [autofix.ci] apply automated fixes

* docs(Drawer): uploaded better photo

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: stanleyoos

static/assets/7.x/drawer/drawerActiveBackgroundColor.png

@@ -332,10 +332,28 @@ Function, that given `{ focused: boolean, color: string, size: number }` returns
 
 Color for the icon and label in the active item in the drawer.
 
+<img src="/assets/7.x/drawer/drawerActiveTintColor.png" width="500" alt="Drawer active tint color" />
+
+```js
+   drawerActiveTintColor: 'green',
+```
+
 #### `drawerActiveBackgroundColor`
 
 Background color for the active item in the drawer.
 
+<img src="/assets/7.x/drawer/drawerActiveBackgroundColor.png" width="500" alt="Drawer active background color" />
+
+```js
+    screenOptions={{
+      drawerActiveTintColor: 'white',
+      drawerActiveBackgroundColor: '#003CB3',
+      drawerLabelStyle: {
+        color: 'white',
+      },
+    }}
+```
+
 #### `drawerInactiveTintColor`
 
 Color for the icon and label in the inactive items in the drawer.
@@ -348,10 +366,35 @@ Background color for the inactive items in the drawer.
 
 Style object for the single item, which can contain an icon and/or a label.
 
+<img src="/assets/7.x/drawer/drawerItemStyle.png" width="500" alt="Drawer item style" />
+
+Example:
+
+```js
+   drawerItemStyle: {
+    backgroundColor: '#9dd3c8',
+    borderColor: 'black',
+    orderWidth: 2,
+    opacity: 0.6,
+  },
+```
+
 #### `drawerLabelStyle`
 
 Style object to apply to the `Text` style inside content section which renders a label.
 
+<img src="/assets/7.x/drawer/drawerLabelStyle.png" width="500" alt="Drawer label style" />
+
+Example:
+
+```js
+   drawerLabelStyle: {
+      color: 'black',
+      fontSize: 20,
+      fontFamily: 'Georgia',
+    },
+```
+
 #### `drawerContentContainerStyle`
 
 Style object for the content section inside the `ScrollView`.
@@ -364,7 +407,7 @@ Style object for the wrapper view.
 
 Style object for the drawer component. You can pass a custom background color for a drawer or a custom width here.
 
-<samp id="drawer-with-style" />
+<img src="/assets/7.x/drawer/drawerStyle.png" width="500" alt="Drawer style" />
 
 ```js
 <Drawer.Navigator
@@ -388,8 +431,20 @@ Options are `left` or `right`. Defaults to `left` for LTR languages and `right`
 Type of the drawer. It determines how the drawer looks and animates.
 
 - `front`: Traditional drawer which covers the screen with an overlay behind it.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/drawer/drawerType-front.mp4" />
+  </video>
+
 - `back`: The drawer is revealed behind the screen on swipe.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/drawer/drawerType-back.mp4" />
+  </video>
+
 - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/drawer/drawerType-slide.mp4" />
+  </video>
+
 - `permanent`: A permanent drawer is shown as a sidebar. Useful for having always visible drawer on larger screens.
 
 Defaults to `slide` on iOS and `front` on other platforms.
@@ -419,6 +474,10 @@ function MyDrawer() {
 
 You can also specify other props such as `drawerStyle` based on screen size to customize the behavior. For example, you can combine it with `defaultStatus="open"` to achieve a master-detail layout:
 
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/drawer/drawerType-masterDetail.mp4" />
+</video>
+
 ```js
 import { useWindowDimensions } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
@@ -451,20 +510,32 @@ When set to `true`, Drawer will hide the OS status bar whenever the drawer is pu
 
 #### `drawerStatusBarAnimation`
 
-Animation of the statusbar when hiding it. use in combination with `hideStatusBar`.
+Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
+
+This is only supported on iOS. Defaults to `slide`.
 
 Supported values:
 
 - `slide`
+  <video playsInline autoPlay muted loop>
+    <source src="/assets/7.x/drawer/drawerStatusBarAnimation-slide.mp4" />
+  </video>
+
 - `fade`
-- `none`
+  <video playsInline autoPlay muted loop>
+    <source src="/assets/7.x/drawer/drawerStatusBarAnimation-fade.mp4" />
+  </video>
 
-This is only supported on iOS. Defaults to `slide`.
+- `none`
 
 #### `overlayColor`
 
 Color overlay to be displayed on top of the content view when drawer gets open. The opacity is animated from `0` to `1` when the drawer opens.
 
+  <video playsInline autoPlay muted loop>
+    <source src="/assets/7.x/drawer/overlayColor.mp4" />
+  </video>
+
 #### `sceneContainerStyle`
 
 Style object for the component wrapping the screen content.