Update bottom tab docs

Author: satya164

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

@@ -65,10 +65,6 @@ It supports the following values:
 - `history` - return to last visited tab
 - `none` - do not handle back button
 
-#### `lazy`
-
-Defaults to `true`. If `false`, all tabs are rendered immediately. When `true`, tabs are rendered only when they are made active for the first time. Note: tabs are **not** re-rendered upon subsequent visits.
-
 #### `detachInactiveScreens`
 
 Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. Make sure to call `enableScreens` from [react-native-screens](https://github.com/software-mansion/react-native-screens) to make it work. Defaults to `true`.
@@ -166,82 +162,105 @@ function MyTabBar({ navigation }) {
 }
 ```
 
-#### `tabBarOptions`
+### Options
+
+The following [options](screen-options.md) can be used to configure the screens in the navigator:
+
+#### `title`
+
+Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.
+
+#### `tabBarLabel`
+
+Title string of a tab displayed in the tab bar or a function that given `{ focused: boolean, color: string }` returns a React.Node, to display in tab bar. When undefined, scene `title` is used. To hide, see `tabBarOptions.showLabel` in the previous section.
+
+#### `tabBarShowLabel`
+
+Whether the tab label should be visible. Defaults to `true`.
+
+### `tabBarLabelPosition`
 
-An object containing the props for the default tab bar component. If you're using a custom tab bar, these will be passed as props to the tab bar and you can handle them.
+Whether the label is shown below the icon or beside the icon.
 
-It can contain the following properties:
+- `below-icon`: the label is shown below the icon (typical for iPhones)
+- `beside-icon` the label is shown next to the icon (typical for iPad)
 
-##### `activeTintColor`
+By default, the position is chosen automatically based on device width.
 
-Label and icon color of the active tab item.
+#### `tabBarLabelStyle`
 
-##### `inactiveTintColor`
+Style object for the tab label.
 
-Label and icon color of the inactive tab item.
+#### `tabBarIcon`
 
-##### `activeBackgroundColor`
+Function that given `{ focused: boolean, color: string, size: number }` returns a React.Node, to display in the tab bar.
 
-Background color of the active tab item.
+#### `tabBarIconStyle`
 
-##### `inactiveBackgroundColor`
+Style object for the tab icon.
 
-Background color of the inactive tab item.
+#### `tabBarBadge`
 
-##### `tabStyle`
+Text to show in a badge on the tab icon. Accepts a `string` or a `number`.
 
-Style object for the tab item.
+#### `tabBarBadgeStyle`
 
-##### `showLabel`
+Style for the badge on the tab icon. You can specify a background color or text color here.
 
-Whether to show label for tab, default is `true`.
+#### `tabBarAccessibilityLabel`
 
-##### `labelStyle`
+Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab.
 
-Style object for the tab label text.
+#### `tabBarTestID`
 
-##### `labelPosition`
+ID to locate this tab button in tests.
+
+#### `tabBarButton`
+
+Function which returns a React element to render as the tab bar button. It wraps the icon and label. Renders `Pressable` by default.
 
-Whether the label is rendered below the icon or beside the icon. Possible values are:
+You can specify a custom implementation here:
 
-- `below-icon`
-- `beside-icon`
+```js
+tabBarButton: props => <TouchableOpacity {...props} />
+```
 
-By default, in `vertical` orientation (portrait mode), label is rendered below the icon and in `horizontal` orientation (landscape mode)., it's rendered beside the icon.
+#### `tabBarActiveTintColor`
 
-##### `adaptive`
+Color for the icon and label in the active tab.
 
-Should the tab icons and labels alignment change based on screen size? Defaults to `true`. If `false`, tab icons and labels align vertically all the time (`labelPosition: 'below-icon'`). When `true`, tab icons and labels align horizontally on tablets (`labelPosition: 'beside-icon'`).
+#### `tabBarInactiveTintColor`
 
-##### `allowFontScaling`
+Color for the icon and label in the inactive tabs.
 
-Whether label font should scale to respect Text Size accessibility settings, default is true.
+#### `tabBarActiveBackgroundColor`
 
-##### `keyboardHidesTabBar`
+Background color for the active tab.
 
-Whether the tab bar is hidden when the keyboard opens. Defaults to `false`.
+#### `tabBarInactiveBackgroundColor`
 
-##### `safeAreaInsets`
+Background color for the inactive tabs.
 
-Safe area insets for the screen. This is used to avoid elements like notch and system navigation bar. By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
+##### `tabBarHideOnKeyboard`
 
-Takes an object containing following optional properties:
+Whether the tab bar is hidden when the keyboard opens. Defaults to `false`.
 
-- `top` - _number_ - The value of the top inset, e.g. area containing the status bar and notch.
-- `right` - _number_ - The value of the left inset.
-- `bottom` - _number_ - The value of the bottom inset, e.g. area navigation bar on bottom.
-- `left`. - _number_ - The value of the right inset.
+##### `tabBarItemStyle`
 
-##### `style`
+Style object for the tab item container.
+
+##### `tabBarStyle`
 
 Style object for the tab bar. You can configure styles such as background color here.
 
 To show your screen under the tab bar, you can set the `position` style to absolute:
 
 ```js
-style: {
-  position: 'absolute';
-}
+<Tab.Navigator
+  screenOptions={{
+    tabBarStyle: { position: 'absolute' },
+  }}
+>
 ```
 
 You also might need to add a bottom margin to your content if you have a absolutely positioned tab bar. React Navigation won't do it automatically.
@@ -270,41 +289,30 @@ import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 const tabBarHeight = useBottomTabBarHeight();
 ```
 
-### Options
+#### `tabBarBackground`
 
-The following [options](screen-options.md) can be used to configure the screens in the navigator:
+Function which returns a React Element to use as background for the tab bar. You could render an image, a gradient, blur view etc.:
 
-#### `title`
-
-Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.
-
-#### `tabBarIcon`
-
-Function that given `{ focused: boolean, color: string, size: number }` returns a React.Node, to display in the tab bar.
-
-#### `tabBarLabel`
-
-Title string of a tab displayed in the tab bar or a function that given `{ focused: boolean, color: string }` returns a React.Node, to display in tab bar. When undefined, scene `title` is used. To hide, see `tabBarOptions.showLabel` in the previous section.
-
-#### `tabBarBadge`
-
-Text to show in a badge on the tab icon. Accepts a `string` or a `number`.
-
-#### `tabBarBadgeStyle`
-
-Style for the badge on the tab icon. You can specify a background color or text color here.
-
-#### `tabBarButton`
+```js
+import { BlurView } from 'expo-blur';
 
-Function which returns a React element to render as the tab bar button. It wraps the icon and label and implements `onPress`. Renders `TouchableWithoutFeedback` by default. `tabBarButton: props => <TouchableOpacity {...props} />` would use `TouchableOpacity` instead.
+// ...
 
-#### `tabBarAccessibilityLabel`
+<Tab.Navigator
+  screenOptions={{
+    tabBarStyle: { position: 'absolute' },
+    tabBarBackground: () => (
+      <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
+    ),
+  }}
+>
+```
 
-Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab.
+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.
 
-#### `tabBarTestID`
+#### `lazy`
 
-ID to locate this tab button in tests.
+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.
 
 #### `unmountOnBlur`
 

versioned_docs/version-6.x/upgrading-from-5.x.md

@@ -293,14 +293,15 @@ The list of the options and their new name are follows:
 - `activeBackgroundColor` -> `tabBarActiveBackgroundColor`
 - `inactiveBackgroundColor` -> `tabBarInactiveBackgroundColor`
 - `allowFontScaling` -> `tabBarAllowFontScaling`
-- `adaptive` -> `tabBarAdaptive`
 - `showLabel` -> `tabBarShowLabel`
 - `labelPosition` -> `tabBarLabelPosition`
 - `labelStyle` -> `tabBarLabelStyle`
 - `iconStyle` -> `tabBarIconStyle`
 - `tabStyle` -> `tabBarItemStyle`
 - `style` -> `tabBarStyle`
 
+The `adaptive` option is removed since you can already disable the automatic label positioning by specifying a `tabBarLabelPosition`.
+
 To keep the same behavior as before, you can specify these in `screenOptions`.
 
 ### The `tabBarVisible` option is no longer present