diff --git a/src/presets/bubble/item/BubbleTabBarItem.tsx b/src/presets/bubble/item/BubbleTabBarItem.tsx index 945a3ce..55f6796 100644 --- a/src/presets/bubble/item/BubbleTabBarItem.tsx +++ b/src/presets/bubble/item/BubbleTabBarItem.tsx @@ -2,6 +2,7 @@ import React, { useMemo, memo } from 'react'; import { View, Text, LayoutChangeEvent } from 'react-native'; import Animated from 'react-native-reanimated'; import { interpolateColor, useValue } from 'react-native-redash/lib/module/v1'; +import { RectButton } from 'react-native-gesture-handler'; // @ts-ignore 😞 import isEqual from 'lodash.isequal'; import { interpolate } from '../../../utilities'; @@ -30,6 +31,7 @@ const BubbleTabBarItemComponent = ({ //#endregion //#region variables + const borderRadius = innerVerticalSpace * 2 + iconSize; const labelWidth = useValue(0); /** * @DEV @@ -62,13 +64,14 @@ const BubbleTabBarItemComponent = ({ }), }, ]; + const buttonStyle = { borderRadius }; const contentContainerStyle = [ styles.contentContainer, { flexDirection: isRTL ? 'row-reverse' : 'row', paddingHorizontal: innerHorizontalSpace, paddingVertical: innerVerticalSpace, - borderRadius: innerVerticalSpace * 2 + iconSize, + borderRadius, backgroundColor: interpolateColor(animatedFocus, { inputRange: [0, 1], outputRange: [background.inactiveColor, background.activeColor], @@ -126,9 +129,11 @@ const BubbleTabBarItemComponent = ({ return ( - - {renderIcon()} - + + + {renderIcon()} + + {label}