feat: add tabStyle to bubble preset

example/src/screens/BubbleStyled.tsx

@@ -1,7 +1,10 @@
 import React, { useMemo } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { ViewStyle } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {
+  createBottomTabNavigator,
+  BottomTabBarOptions,
+} from '@react-navigation/bottom-tabs';
 import AnimatedTabBar, {
   TabsConfig,
   BubbleTabBarItemConfig,
@@ -84,7 +87,7 @@ const BubbleStyledScreen = () => {
     return 20 + bottom + 12 * 2 + 12 * 2 + 12;
   }, [bottom]);
 
-  const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
+  const tabBarStyle = useMemo<ViewStyle>(
     () => ({
       position: 'absolute',
       left: 0,
@@ -108,14 +111,22 @@ const BubbleStyledScreen = () => {
     [bottom]
   );
 
-  const tabBarOptions = useMemo(
+  const tabStyle = useMemo<ViewStyle>(
+    () => ({
+      borderRadius: 8,
+    }),
+    []
+  );
+
+  const tabBarOptions: BottomTabBarOptions = useMemo(
     () => ({
       safeAreaInsets: {
         bottom: 0,
       },
+      tabStyle,
       style: tabBarStyle,
     }),
-    [tabBarStyle]
+    [tabBarStyle, tabStyle]
   );
 
   // render

src/presets/bubble/BubbleTabBar.tsx

@@ -22,6 +22,7 @@ import { styles } from './styles';
 const BubbleTabBarComponent = ({
   selectedIndex,
   tabs,
+  tabStyle,
   duration = DEFAULT_ITEM_ANIMATION_DURATION,
   easing = DEFAULT_ITEM_ANIMATION_EASING,
   itemInnerSpace = DEFAULT_ITEM_INNER_SPACE,
@@ -84,6 +85,7 @@ const BubbleTabBarComponent = ({
               itemContainerWidth={itemContainerWidth}
               iconSize={iconSize}
               isRTL={isRTL}
+              tabStyle={tabStyle}
               {...configs}
             />
           </RawButton>

src/presets/bubble/item/BubbleTabBarItem.tsx

@@ -23,6 +23,7 @@ const BubbleTabBarItemComponent = ({
   itemOuterSpace,
   iconSize,
   isRTL,
+  tabStyle,
 }: BubbleTabBarItemProps) => {
   //#region extract props
   const {
@@ -110,6 +111,7 @@ const BubbleTabBarItemComponent = ({
         outputRange: [background.inactiveColor, background.activeColor],
       }),
     },
+    tabStyle,
   ];
   const labelContainerStyle = [
     styles.labelContainer,

src/presets/bubble/types.ts

@@ -1,8 +1,10 @@
-import type { TextStyle } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
 import type Animated from 'react-native-reanimated';
 import type { TabBarItemProps } from '../../types';
 
-export interface BubbleTabBarConfig {}
+export interface BubbleTabBarConfig {
+  tabStyle?: ViewStyle;
+}
 
 export interface BubbleTabBarItemConfig {
   /**
@@ -52,6 +54,7 @@ export interface BubbleTabBarItemConfig {
      */
     inactiveColor: string;
   };
+  tabStyle?: ViewStyle;
 }
 
 export type BubbleTabBarItemProps = TabBarItemProps & BubbleTabBarItemConfig;