refactor: move tabBarOptions to options for bottom tabs

BREAKING CHANGE: This commit moves options from `tabBarOptions` to regular `options` in order to reduce confusion between the two, as well as to make it more flexible to configure the tab bar based on a per screen basis.

packages/bottom-tabs/src/index.tsx

@@ -24,6 +24,5 @@ export type {
   BottomTabNavigationProp,
   BottomTabScreenProps,
   BottomTabBarProps,
-  BottomTabBarOptions,
   BottomTabBarButtonProps,
 } from './types';

packages/bottom-tabs/src/types.tsx

@@ -16,6 +16,7 @@ import type {
   TabActionHelpers,
   RouteProp,
 } from '@react-navigation/native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
 
 export type BottomTabNavigationEventMap = {
   /**
@@ -140,98 +141,98 @@ export type BottomTabNavigationOptions = {
    */
   tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
 
-  /**
-   * Whether this screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountOnBlur?: boolean;
-};
-
-export type BottomTabDescriptor = Descriptor<
-  BottomTabNavigationOptions,
-  BottomTabNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
->;
-
-export type BottomTabDescriptorMap = Record<string, BottomTabDescriptor>;
-
-export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
-  /**
-   * Whether the screens should render the first time they are accessed. Defaults to `true`.
-   * Set it to `false` if you want to render all screens on initial render.
-   */
-  lazy?: boolean;
-  /**
-   * Function that returns a React element to display as the tab bar.
-   */
-  tabBar?: (props: BottomTabBarProps<T>) => React.ReactNode;
-  /**
-   * Options for the tab bar which will be passed as props to the tab bar component.
-   */
-  tabBarOptions?: T;
-  /**
-   * Whether inactive screens should be detached from the view hierarchy to save memory.
-   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
-   * Defaults to `true` on Android.
-   */
-  detachInactiveScreens?: boolean;
-  /**
-   * Style object for the component wrapping the screen content.
-   */
-  sceneContainerStyle?: StyleProp<ViewStyle>;
-};
-
-export type BottomTabBarOptions = {
-  /**
-   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
-   */
-  keyboardHidesTabBar?: boolean;
   /**
    * Color for the icon and label in the active tab.
    */
-  activeTintColor?: string;
+  tabBarActiveTintColor?: string;
+
   /**
    * Color for the icon and label in the inactive tabs.
    */
-  inactiveTintColor?: string;
+  tabBarInactiveTintColor?: string;
+
   /**
    * Background color for the active tab.
    */
-  activeBackgroundColor?: string;
+  tabBarActiveBackgroundColor?: string;
+
   /**
    * background color for the inactive tabs.
    */
-  inactiveBackgroundColor?: string;
+  tabBarInactiveBackgroundColor?: string;
+
   /**
    * Whether label font should scale to respect Text Size accessibility settings.
    */
-  allowFontScaling?: boolean;
+  tabBarAllowFontScaling?: boolean;
+
   /**
    * Whether the tab label should be visible. Defaults to `true`.
    */
-  showLabel?: boolean;
+  tabBarShowLabel?: boolean;
+
   /**
    * Style object for the tab label.
    */
-  labelStyle?: StyleProp<TextStyle>;
+  tabBarLabelStyle?: StyleProp<TextStyle>;
+
   /**
    * Style object for the tab icon.
    */
-  iconStyle?: StyleProp<TextStyle>;
+  tabBarIconStyle?: StyleProp<TextStyle>;
+
   /**
-   * Style object for the tab container.
+   * Style object for the tab item container.
    */
-  tabStyle?: StyleProp<ViewStyle>;
+  tabBarItemStyle?: StyleProp<ViewStyle>;
+
   /**
    * Whether the label is rendered below the icon or beside the icon.
    * By default, the position is chosen automatically based on device width.
    * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
    */
-  labelPosition?: LabelPosition;
+  tabBarLabelPosition?: LabelPosition;
+
   /**
    * Whether the label position should adapt to the orientation.
    */
-  adaptive?: boolean;
+  tabBarAdaptive?: boolean;
+
+  /**
+   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
+   */
+  tabBarHideOnKeyboard?: boolean;
+
+  /**
+   * Style object for the tab bar container.
+   */
+  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+
+  /**
+   * Whether this screen should be unmounted when navigating away from it.
+   * Defaults to `false`.
+   */
+  unmountOnBlur?: boolean;
+};
+
+export type BottomTabDescriptor = Descriptor<
+  BottomTabNavigationOptions,
+  BottomTabNavigationProp<ParamListBase>,
+  RouteProp<ParamListBase, string>
+>;
+
+export type BottomTabDescriptorMap = Record<string, BottomTabDescriptor>;
+
+export type BottomTabNavigationConfig = {
+  /**
+   * Whether the screens should render the first time they are accessed. Defaults to `true`.
+   * Set it to `false` if you want to render all screens on initial render.
+   */
+  lazy?: boolean;
+  /**
+   * Function that returns a React element to display as the tab bar.
+   */
+  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
   /**
    * Safe area insets for the tab bar. This is used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
    * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
@@ -243,15 +244,22 @@ export type BottomTabBarOptions = {
     left?: number;
   };
   /**
-   * Style object for the tab bar container.
+   * Whether inactive screens should be detached from the view hierarchy to save memory.
+   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
+   * Defaults to `true` on Android.
    */
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  detachInactiveScreens?: boolean;
+  /**
+   * Style object for the component wrapping the screen content.
+   */
+  sceneContainerStyle?: StyleProp<ViewStyle>;
 };
 
-export type BottomTabBarProps<T = BottomTabBarOptions> = T & {
+export type BottomTabBarProps = {
   state: TabNavigationState<ParamListBase>;
   descriptors: BottomTabDescriptorMap;
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
+  insets: EdgeInsets;
 };
 
 export type BottomTabBarButtonProps = Omit<