Fix videos in 7.x docs

satya164 · satya164 · commit 471350bd4c58 · 2024-03-07T01:52:24.000+01:00
diff --git a/versioned_docs/version-7.x/drawer-based-navigation.md b/versioned_docs/version-7.x/drawer-based-navigation.md
@@ -9,6 +9,12 @@ import TabItem from '@theme/TabItem';
 
 Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens.
 
+<div style={{ display: 'flex', margin: '16px 0' }}>
+  <video playsInline autoPlay muted loop style={{ maxWidth: '280px' }}>
+    <source src="/assets/navigators/drawer/drawer.mp4" />
+  </video>
+</div>
+
 Before continuing, first install and configure [`@react-navigation/drawer`](https://github.com/react-navigation/react-navigation/tree/main/packages/drawer) and its dependencies following the [installation instructions](drawer-navigator.md#installation).
 
 ## Minimal example of drawer-based navigation
@@ -111,11 +117,6 @@ export default function App() {
 }
 ```
 
-<div style={{ display: 'flex', margin: '16px 0' }}>
-  <video playsInline autoPlay muted loop style={{ maxWidth: '280px' }}>
-    <source src="/assets/navigators/drawer/drawer.mp4" />
-  </video>
-</div>
 </TabItem>
 </Tabs>
 
diff --git a/versioned_docs/version-7.x/header-buttons.md b/versioned_docs/version-7.x/header-buttons.md
@@ -102,12 +102,11 @@ export default function App() {
 }
 ```
 
-![Header button](/assets/headers/header-button.png)
-
-When we define our button this way, the `this` variable in `options` is _not_ the `HomeScreen` instance, so you can't call `setState` or any instance methods on it. This is pretty important because it's extremely common to want the buttons in your header to interact with the screen that the header belongs to. So, we will look how to do this next.
 </TabItem>
 </Tabs>
 
+![Header button](/assets/headers/header-button.png)
+
 When we define our button this way, the `this` variable in `options` is _not_ the `HomeScreen` instance, so you can't call `setState` or any instance methods on it. This is pretty important because it's common to want the buttons in your header to interact with the screen that the header belongs to. So, we will look how to do this next.
 
 :::tip
@@ -173,11 +172,6 @@ export default function App() {
 }
 ```
 
-<div style={{ display: 'flex', margin: '16px 0' }}>
-  <video playsInline autoPlay muted loop style={{ maxWidth: '280px' }}>
-    <source src="/assets/headers/header-update-screen.mov" />
-  </video>
-</div>
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
@@ -238,6 +232,12 @@ export default function App() {
 </TabItem>
 </Tabs>
 
+<div style={{ display: 'flex', margin: '16px 0' }}>
+  <video playsInline autoPlay muted loop style={{ maxWidth: '280px' }}>
+    <source src="/assets/headers/header-update-screen.mov" />
+  </video>
+</div>
+
 Here we update the `headerRight` with a button with `onPress` handler that has access to the component's state and can update it.
 
 ## Customizing the back button
@@ -248,6 +248,26 @@ You can change the label behavior with `headerBackTitle` and style it with `head
 
 To customize the back button image, you can use `headerBackImageSource` ([read more](native-stack-navigator.md#headerbackimagesource)).
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createNativeStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        headerBackTitle: 'Custom Back',
+        headerBackTitleStyle: { fontSize: 30 },
+      },
+    },
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 ```js
 <Stack.Navigator>
   <Stack.Screen name="Home" component={HomeScreen} />
@@ -262,6 +282,9 @@ To customize the back button image, you can use `headerBackImageSource` ([read m
 </Stack.Navigator>
 ```
 
+</TabItem>
+</Tabs>
+
 ![Header custom back](/assets/headers/header-back-custom.png)
 
 ## Overriding the back button
diff --git a/versioned_docs/version-7.x/headers.md b/versioned_docs/version-7.x/headers.md
@@ -98,10 +98,11 @@ export default function App() {
 }
 ```
 
-![Header title](/assets/headers/header-title.png)
 </TabItem>
 </Tabs>
 
+![Header title](/assets/headers/header-title.png)
+
 ## Using params in the title
 
 In order to use params in the title, we need to make `options` for the screen a function that returns a configuration object. If we make `options` a function then React Navigation will call it with an object containing `{ navigation, route }` - in this case, all we care about is `route`, which is the same object that is passed to your screen props as `route` prop. You may recall that we can get the params through `route.params`, and so we do this below to extract a param and use it as a title.
diff --git a/versioned_docs/version-7.x/modal.md b/versioned_docs/version-7.x/modal.md
@@ -177,13 +177,14 @@ function App() {
 export default App;
 ```
 
+</TabItem>
+</Tabs>
+
 <div style={{ display: 'flex', margin: '16px 0' }}>
   <video playsInline autoPlay muted loop style={{ maxWidth: '280px' }}>
     <source src="/assets/modal/modal.mp4" />
   </video>
 </div>
-</TabItem>
-</Tabs>
 
 Here, we are creating 2 groups of screens using the `RootStack.Group` component. The first group is for our regular screens, and the second group is for our modal screens. For the modal group, we have specified `presentation: 'modal'` in `screenOptions`. This will apply this option to all the screens inside the group. This option will change the animation for the screens to animate from bottom-to-top rather than right to left. The `presentation` option for stack navigator can be either `card` (default) or `modal`. The `modal` behavior slides the screen in from the bottom and allows the user to swipe down from the top to dismiss it on iOS.
 
diff --git a/versioned_docs/version-7.x/multiple-drawers.md b/versioned_docs/version-7.x/multiple-drawers.md
@@ -388,13 +388,14 @@ export default function App() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 <div style={{ display: 'flex', margin: '16px 0' }}>
   <video playsInline autoPlay muted loop style={{ maxWidth: '280px' }}>
     <source src="/assets/navigators/drawer/drawer-multiple.mp4" />
   </video>
 </div>
-</TabItem>
-</Tabs>
 
 But there is one problem. When we call `navigation.openDrawer()` in our `HomeScreen`, it always opens the left drawer since it's the immediate parent of the screen.
 
diff --git a/versioned_docs/version-7.x/navigating.md b/versioned_docs/version-7.x/navigating.md
@@ -248,13 +248,6 @@ function HomeScreen() {
   );
 }
 
-<div style={{ display: 'flex', margin: '16px 0' }}>
-  <video playsInline autoPlay muted loop style={{ maxWidth: '280px' }}>
-    <source src="/assets/navigators/stack/back-home.mov" />
-  </video>
-</div>
-
-> On Android, React Navigation hooks in to the hardware back button and fires the `goBack()` function for you when the user presses it, so it behaves as the user would expect.
 // codeblock-focus-start
 function DetailsScreen() {
   const navigation = useNavigation();
@@ -289,6 +282,12 @@ export default function App() {
 }
 ```
 
+<div style={{ display: 'flex', margin: '16px 0' }}>
+  <video playsInline autoPlay muted loop style={{ maxWidth: '280px' }}>
+    <source src="/assets/navigators/stack/back-home.mov" />
+  </video>
+</div>
+
 :::note
 
 On Android, React Navigation hooks in to the hardware back button and fires the `goBack()` function for you when the user presses it, so it behaves as the user would expect.
diff --git a/versioned_docs/version-7.x/tab-based-navigation.md b/versioned_docs/version-7.x/tab-based-navigation.md
@@ -98,10 +98,11 @@ export default function App() {
 }
 ```
 
-![Tabs minimal](/assets/navigators/tabs/tabs-minimal.png)
 </TabItem>
 </Tabs>
 
+![Tabs minimal](/assets/navigators/tabs/tabs-minimal.png)
+
 ## Customizing the appearance
 
 This is similar to how you would customize a stack navigator &mdash; there are some properties that are set when you initialize the tab navigator and others that can be customized per-screen in `options`.
