Document tabBarPosition

Author: satya164

src/css/custom.css

@@ -186,15 +186,28 @@
 }
 
 article video {
-  max-width: 100%;
   width: 300px;
   height: auto;
+  max-width: 100%;
   vertical-align: top;
   margin: var(--ifm-leading) 0;
   border-radius: var(--ifm-pre-border-radius);
   box-shadow: var(--ifm-global-shadow-lw);
 }
 
+article video[data-landscape] {
+  width: auto;
+  height: 373px;
+}
+
+@media (max-width: 320px) {
+  article video,
+  article video[data-landscape] {
+    width: 100%;
+    height: auto;
+  }
+}
+
 article video:has(+ video) {
   margin-right: var(--ifm-leading);
 }

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

@@ -422,6 +422,29 @@ import { BlurView } from 'expo-blur';
 
 When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
 
+#### `tabBarPosition`
+
+Position of the tab bar. Available values are:
+
+- `bottom` (Default)
+- `top`
+- `left`
+- `right`
+
+When the tab bar is positioned on the `left` or `right`, it is styled as a sidebar. This can be useful when you want to show a sidebar on larger screens and a bottom tab bar on smaller screens:
+
+```js
+<Tab.Navigator
+  screenOptions={{
+    tabBarPosition: dimensions.width < 600 ? 'bottom' : 'left',
+  }}
+>
+```
+
+<video playsInline autoPlay muted loop data-landscape>
+  <source src="/assets/7.x/bottom-tabs-side.mp4" />
+</video>
+
 #### `lazy`
 
 Whether this screens should render the first time it's accessed. Defaults to `true`. Set it to `false` if you want to render the screen on initial render.

versioned_docs/version-7.x/bottom-tab-navigator.md

@@ -662,6 +662,8 @@ You can use the `tabBarPosition` option to customize the position of the tabs:
 </Tab.Navigator>
 ```
 
+See [Bottom Tab Navigator options](bottom-tab-navigator.md#tabbarposition) for usage.
+
 #### Bottom Tab Navigator now supports animations
 
 The `@react-navigation/bottom-tabs` package now supports animations. This was one of the most requested features on our Canny board: [TabNavigator Custom Transition](https://react-navigation.canny.io/feature-requests/p/tabnavigator-custom-transition).