Update demo videos for navigators

Author: satya164

src/css/custom.css

@@ -181,6 +181,7 @@ article video {
   width: 300px;
   height: auto;
   margin: 16px 0;
+  vertical-align: top;
 }
 
 article video:has(+ video) {

static/assets/7.x/bottom-tabs.mp4

@@ -7,7 +7,7 @@ sidebar_label: Bottom Tabs
 A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/tabs/bottom-tabs-demo.mov" />
+  <source src="/assets/7.x/bottom-tabs.mp4" />
 </video>
 
 ## Installation

static/assets/7.x/drawer-layout.mp4

@@ -7,7 +7,7 @@ sidebar_label: Drawer Layout
 A cross-platform Drawer component for React Native implemented using [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/drawer/drawer.mov" />
+  <source src="/assets/7.x/drawer-layout.mp4" />
 </video>
 
 This package doesn't integrate with React Navigation. If you want to integrate the drawer layout with React Navigation's navigation system, e.g. want to show screens in the drawer and be able to navigate between them using `navigation.navigate` etc, use [Drawer Navigator](drawer-navigator.md) instead.

static/assets/7.x/drawer.mp4

@@ -7,7 +7,7 @@ sidebar_label: Drawer
 Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/drawer/drawer.mov" />
+  <source src="/assets/7.x/drawer.mp4" />
 </video>
 
 This wraps [`react-native-drawer-layout`](drawer-layout.md). If you want to use the drawer without React Navigation integration, use the library directly instead.

static/assets/7.x/material-top-tabs.mp4

@@ -7,7 +7,7 @@ sidebar_label: Material Top Tabs
 A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/tabs/material-top-tabs.mov" />
+  <source src="/assets/7.x/material-top-tabs.mp4" />
 </video>
 
 This wraps [`react-native-tab-view`](tab-view.md). If you want to use the tab view without React Navigation integration, use the library directly instead.

static/assets/7.x/native-stack-android.mp4

@@ -6,6 +6,14 @@ sidebar_label: Native Stack
 
 Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.
 
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/native-stack-android.mp4" />
+</video>
+
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/native-stack-ios.mp4" />
+</video>
+
 This navigator uses the native APIs `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createNativeStackNavigator` will behave exactly the same and have the same performance characteristics as apps built natively on top of those APIs. It also offers basic Web support using [`react-native-web`](https://github.com/necolas/react-native-web).
 
 One thing to keep in mind is that while `@react-navigation/native-stack` offers native performance and exposes native features such as large title on iOS etc., it may not be as customizable as [`@react-navigation/stack`](stack-navigator.md) depending on your needs. So if you need more customization than what's possible in this navigator, consider using `@react-navigation/stack` instead - which is a more customizable JavaScript based implementation.

static/assets/7.x/native-stack-ios.mp4

@@ -9,7 +9,11 @@ Stack Navigator provides a way for your app to transition between screens where
 By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, use OS default animation on Android. But the [animations can be customized](#animation-related-options) to match your needs.
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/stack.mov" />
+  <source src="/assets/7.x/stack-android.mp4" />
+</video>
+
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack-ios.mp4" />
 </video>
 
 One thing to keep in mind is that while `@react-navigation/stack` is extremely customizable, it's implemented in JavaScript. While it runs animations and gestures using natively, the performance may not be as fast as a native implementation. This may not be an issue for a lot of apps, but if you're experiencing performance issues during navigation, consider using [`@react-navigation/native-stack`](native-stack-navigator.md) instead - which uses native navigation primitives.

static/assets/7.x/stack-android.mp4

@@ -44,8 +44,8 @@
     "Navigators": [
       "stack-navigator",
       "native-stack-navigator",
-      "drawer-navigator",
       "bottom-tab-navigator",
+      "drawer-navigator",
       "material-top-tab-navigator"
     ],
     "Libraries": ["devtools", "elements", "tab-view", "drawer-layout"],