From a7169eb92db70b526eb45b165ed1b5cea2018cb1 Mon Sep 17 00:00:00 2001
From: stringsaeed <stringsaeed@gmail.com>
Date: Fri, 24 Jul 2020 09:34:06 +0200
Subject: [PATCH 1/2] feat: add tabStyle to bubble preset

---
 example/src/screens/BubbleStyled.tsx         | 21 +++++++++++++++-----
 src/presets/bubble/BubbleTabBar.tsx          |  2 ++
 src/presets/bubble/item/BubbleTabBarItem.tsx |  2 ++
 src/presets/bubble/types.ts                  |  7 +++++--
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/example/src/screens/BubbleStyled.tsx b/example/src/screens/BubbleStyled.tsx
index ab6060b..2af6ef3 100644
--- a/example/src/screens/BubbleStyled.tsx
+++ b/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
diff --git a/src/presets/bubble/BubbleTabBar.tsx b/src/presets/bubble/BubbleTabBar.tsx
index 5a00164..9d7630d 100644
--- a/src/presets/bubble/BubbleTabBar.tsx
+++ b/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>
diff --git a/src/presets/bubble/item/BubbleTabBarItem.tsx b/src/presets/bubble/item/BubbleTabBarItem.tsx
index 46d2cf4..42830a1 100644
--- a/src/presets/bubble/item/BubbleTabBarItem.tsx
+++ b/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,
diff --git a/src/presets/bubble/types.ts b/src/presets/bubble/types.ts
index 347234c..922b5ee 100644
--- a/src/presets/bubble/types.ts
+++ b/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;

From f8c86578a6c4d18a7b7e41a5d182b516b43a74f4 Mon Sep 17 00:00:00 2001
From: stringsaeed <stringsaeed@gmail.com>
Date: Mon, 27 Jul 2020 08:02:23 +0200
Subject: [PATCH 2/2] fix: typings and animation override

---
 src/presets/bubble/item/BubbleTabBarItem.tsx | 2 +-
 src/presets/bubble/types.ts                  | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/presets/bubble/item/BubbleTabBarItem.tsx b/src/presets/bubble/item/BubbleTabBarItem.tsx
index 42830a1..abf589f 100644
--- a/src/presets/bubble/item/BubbleTabBarItem.tsx
+++ b/src/presets/bubble/item/BubbleTabBarItem.tsx
@@ -101,6 +101,7 @@ const BubbleTabBarItemComponent = ({
   ];
   const contentContainerStyle = [
     styles.contentContainer,
+    tabStyle,
     {
       flexDirection: isRTL ? 'row-reverse' : 'row',
       paddingHorizontal: itemInnerHorizontalSpace,
@@ -111,7 +112,6 @@ const BubbleTabBarItemComponent = ({
         outputRange: [background.inactiveColor, background.activeColor],
       }),
     },
-    tabStyle,
   ];
   const labelContainerStyle = [
     styles.labelContainer,
diff --git a/src/presets/bubble/types.ts b/src/presets/bubble/types.ts
index 922b5ee..acc74bd 100644
--- a/src/presets/bubble/types.ts
+++ b/src/presets/bubble/types.ts
@@ -3,10 +3,15 @@ import type Animated from 'react-native-reanimated';
 import type { TabBarItemProps } from '../../types';
 
 export interface BubbleTabBarConfig {
+  /**
+   * description
+   * @type {ViewStyle}
+   */
   tabStyle?: ViewStyle;
 }
 
-export interface BubbleTabBarItemConfig {
+export interface BubbleTabBarItemConfig
+  extends Pick<BubbleTabBarConfig, 'tabStyle'> {
   /**
    * Tab bar item label style.
    * @type {TextStyle}
@@ -54,7 +59,6 @@ export interface BubbleTabBarItemConfig {
      */
     inactiveColor: string;
   };
-  tabStyle?: ViewStyle;
 }
 
 export type BubbleTabBarItemProps = TabBarItemProps & BubbleTabBarItemConfig;