feat: add gifs to navigators (#663)

Added gifs to navigators in API Reference

Author: WoLewicki

docs/assets/navigators/drawer/drawer-demo.gif

@@ -5,6 +5,12 @@ sidebar_label: createBottomTabNavigator
 original_id: bottom-tab-navigator
 ---
 
+<div style="display: flex; justify-content: center">
+  <video width="60%" playsinline autoplay muted loop>
+    <source src="/docs/assets/navigators/tabs/bottom-tabs-demo.mov">
+  <video>
+</div>
+
 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.
 
 To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.html), then install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs):

docs/assets/navigators/drawer/drawer.mov

@@ -5,7 +5,11 @@ sidebar_label: Drawer navigation
 original_id: drawer-based-navigation
 ---
 
-![Using drawer navigator](/docs/assets/navigators/drawer/drawer-demo.gif)
+<div style="display: flex; justify-content: center">
+  <video width="60%" playsinline autoplay muted loop>
+    <source src="/docs/assets/navigators/drawer/drawer.mov">
+  <video>
+</div>
 
 Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens.
 

docs/assets/navigators/stack/push_stack_nav-demo.gif

@@ -5,6 +5,12 @@ sidebar_label: createDrawerNavigator
 original_id: drawer-navigator
 ---
 
+<div style="display: flex; justify-content: center">
+  <video width="60%" playsinline autoplay muted loop>
+    <source src="/docs/assets/navigators/drawer/drawer.mov">
+  <video>
+</div>
+
 Component that renders a navigation drawer which can be opened and closed via gestures.
 
 To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.html), then install [`@react-navigation/drawer`](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer):

docs/assets/navigators/stack/stack-push.mov

@@ -7,7 +7,7 @@ original_id: material-bottom-tab-navigator
 
 A material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation. Routes are lazily initialized - their screen components are not mounted until they are first focused.
 
-<img src="/docs/assets/navigators/bottom-navigation.gif" style="width: 420px; max-width: 100%">
+<img src="/docs/assets/navigators/tabs/material-bottom-tabs.gif" style="width: 420px; max-width: 100%">
 
 This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-paper/bottom-navigation.html) component from [`react-native-paper`](https://reactnativepaper.com). If you [configure the Babel plugin](https://callstack.github.io/react-native-paper/getting-started.html), it won't include the whole `react-native-paper` library in your bundle.
 

docs/assets/navigators/stack/stack.mov

@@ -5,6 +5,12 @@ sidebar_label: createMaterialTopTabNavigator
 original_id: material-top-tab-navigator
 ---
 
+<div style="display: flex; justify-content: center">
+  <video width="60%" playsinline autoplay muted loop>
+    <source src="/docs/assets/navigators/tabs/material-top-tabs.mov">
+  <video>
+</div>
+
 A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the route or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.
 
 This wraps [`react-native-tab-view`](https://github.com/react-native-community/react-native-tab-view).

docs/assets/navigators/tabs/bottom-tabs-demo.mov

@@ -92,7 +92,11 @@ Let's suppose that we actually _want_ to add another details screen. This is pre
 />
 ```
 
-![Stack navigation pushing routes to stack](/docs/assets/navigators/stack/push_stack_nav-demo.gif)
+<div style="display: flex; justify-content: center">
+  <video width="60%" playsinline autoplay muted loop>
+    <source src="/docs/assets/navigators/stack/stack-push.mov">
+  <video>
+</div>
 
 Each time you call `push` we add a new route to the navigation stack. When you call `navigate` it first tries to find an existing route with that name, and only pushes a new route if there isn't yet one on the stack.
 

docs/assets/navigators/bottom-navigation.gif renamed to docs/assets/navigators/tabs/material-bottom-tabs.gif

@@ -5,6 +5,12 @@ sidebar_label: createStackNavigator
 original_id: stack-navigator
 ---
 
+<div style="display: flex; justify-content: center">
+  <video  width="60%" playsinline autoplay muted loop>
+    <source src="/docs/assets/navigators/stack/stack.mov">
+  <video>
+</div>
+
 Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
 
 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, fade in from the bottom on Android. On iOS the stack navigator can also be configured to a modal style where screens slide in from the bottom.