@fattureincloud-mobile/fic-mobile-ds 1.2.1 → 1.2.3

package/lib/typescript/module/styles/theme.d.ts

@@ -0,0 +1,185 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { FicButtonTheme } from '../components/buttons/FicButton/FicButton.types';
+import { BannerThemeProp } from '../components/notifications/Banner/Banner.types';
+import { CalendarTheme } from './calendarTheme';
+import { Colors } from './colors';
+interface FlatButtonThemeProps {
+    color?: string;
+    disabledColor?: string;
+    backgroundColor?: string;
+    hasShadow?: boolean;
+    shadowColor?: string;
+    borderRadius?: number;
+    disabledStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+interface GradientButtonThemeProps {
+    isHorizontalGradient?: boolean;
+    color?: string;
+    disabledColor?: string;
+    backgroundColors?: string[];
+    disabledBackgroundColors?: string[];
+    hasShadow?: boolean;
+    shadowColor?: string;
+    borderRadius?: number;
+    disabledStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+interface OutlineButtonThemeProps {
+    color?: string;
+    disabledColor?: string;
+    backgroundColor?: string;
+    disabledBackgroundColor?: string;
+    borderColor?: string;
+    disabledBorderColor?: string;
+    hasShadow?: boolean;
+    shadowColor?: string;
+    borderRadius?: number;
+    disabledStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+export interface TextInputThemeProps {
+    color?: string;
+    labelColor?: string;
+    disabledTextColor?: string;
+    disabledLabelColor?: string;
+    mandatoryIndicatorColor?: string;
+    placeholderColor?: string;
+    inlineLeadingColor?: string;
+    fieldIconColor?: string;
+    borderColor?: string;
+    focusedBorderColor?: string;
+    disabledBorderColor?: string;
+    erroredBorderColor?: string;
+    warningBorderColor?: string;
+    backgroundColor?: string;
+    disabledBackgroundColor?: string;
+}
+interface TypographiesThemeProps {
+    bodyColor?: string;
+    buttonTitleColor?: string;
+    calloutColor?: string;
+    captionOneColor?: string;
+    captionTwoColor?: string;
+    footnoteColor?: string;
+    headlineColor?: string;
+    largeTitleColor?: string;
+    subheadColor?: string;
+    titleOneColor?: string;
+    titleTwoColor?: string;
+    titleThreeColor?: string;
+}
+export interface TouchablesThemeProps {
+    rippleColors?: string;
+    highlightColor?: string;
+}
+export interface SearchBarThemeProps {
+    color?: string;
+    backgroundColor?: string;
+    iconColor?: string;
+    selectionColor?: string;
+    useTextColor?: string;
+    errorColor?: string;
+}
+export interface DurationPickerThemeProps {
+    activeColor?: string;
+    inactiveColor?: string;
+    labelColor?: string;
+    guidesColor?: string;
+}
+export interface BottomSheetHeaderThemeProps {
+    backgroundColor?: string;
+    emptyHeaderBackgroundColor?: string;
+    handleColor?: string;
+    darkHandleColor?: string;
+    titleColor?: string;
+    captionColor?: string;
+    descriptionColor?: string;
+    buttonsColor?: string;
+    loaderColor?: string;
+}
+export interface BottomSheetThemeProps {
+    backgroundColor?: string;
+    backdropColor?: string;
+    cancelButtonBackgroundColor?: string;
+    header?: BottomSheetHeaderThemeProps;
+    handleIndicator: ViewStyle;
+}
+export interface YearMonthPickerThemeProps {
+    backgroundColor?: string;
+    yearColor?: string;
+    arrowsColor?: string;
+    monthsTextColor?: string;
+    monthsBackgroundColor?: string;
+    currentMonthTextColor?: string;
+    currentMonthBackgroundColor?: string;
+    selectedMonthTextColor?: string;
+    selectedMonthBackgroundColor?: string;
+}
+export interface ThemeProps {
+    flatButton?: FlatButtonThemeProps;
+    gradientButton?: GradientButtonThemeProps;
+    outlineButton?: OutlineButtonThemeProps;
+    textInput?: TextInputThemeProps;
+    typographies?: TypographiesThemeProps;
+    searchBar?: SearchBarThemeProps;
+    datePickers?: CalendarTheme;
+    pickers?: DurationPickerThemeProps;
+    bottomSheetHeader?: BottomSheetHeaderThemeProps;
+    yearMonthPickers?: YearMonthPickerThemeProps;
+}
+export interface GenericThemeProps {
+    backgroundLevel0?: string;
+    backgroundLevel1?: string;
+    backgroundLevel2?: string;
+    backgroundLevel3?: string;
+    backgroundLevel4?: string;
+    title?: string;
+    description?: string;
+    disabledTitle?: string;
+    disabledDescription?: string;
+    divider?: string;
+    cardBackground?: string;
+}
+interface Primaries {
+    azure: Colors;
+    red: Colors;
+    green: Colors;
+    yellow: Colors;
+    purple: Colors;
+    blue: Colors;
+}
+export interface Theme {
+    banner?: BannerThemeProp;
+    ficButton?: FicButtonTheme;
+    flatButton: Omit<Required<FlatButtonThemeProps>, 'disabledStyle' | 'containerStyle'> & {
+        disabledStyle?: StyleProp<ViewStyle>;
+        containerStyle?: StyleProp<ViewStyle>;
+    };
+    gradientButton: Omit<Required<GradientButtonThemeProps>, 'disabledStyle' | 'containerStyle'> & {
+        disabledStyle?: StyleProp<ViewStyle>;
+        containerStyle?: StyleProp<ViewStyle>;
+    };
+    outlineButton: Omit<Required<OutlineButtonThemeProps>, 'disabledStyle' | 'containerStyle'> & {
+        disabledStyle?: StyleProp<ViewStyle>;
+        containerStyle?: StyleProp<ViewStyle>;
+    };
+    textInput: Required<TextInputThemeProps>;
+    typographies: Required<TypographiesThemeProps>;
+    touchables: Required<TouchablesThemeProps>;
+    searchBar: Required<SearchBarThemeProps>;
+    datePickers: CalendarTheme;
+    pickers: DurationPickerThemeProps;
+    bottomSheet: Required<BottomSheetThemeProps>;
+    yearMonthPickers: YearMonthPickerThemeProps;
+    generic?: GenericThemeProps;
+    primaries?: Primaries;
+    primariesContrast?: Primaries;
+    primariesLight?: Primaries;
+    primariesDark?: Primaries;
+}
+export declare const ficTheme: Theme;
+export declare const ficDarkTheme: Theme;
+export declare const defaultTheme: Theme;
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/module/styles/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"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"}

package/lib/typescript/module/utils/locale.d.ts

@@ -0,0 +1,15 @@
+import 'moment/min/locales';
+/**
+ * Retrieves the language and optionally the region settings of the device.
+ *
+ * @param {boolean} [withNoRegion] - If `true`, only the language is returned without the region.
+ * @returns {string} The language and region settings of the device.
+ * @example
+ * // Returns "it_IT" or "it" if `withNoRegion` is `true`
+ * const languageRegion = getDeviceLanguageAndRegion(true);
+ */
+export declare const getDeviceLanguageAndRegion: (withNoRegion?: boolean) => string;
+export declare let desiredLocale: string | undefined;
+declare const setLocale: (localeCode: string) => void;
+export default setLocale;
+//# sourceMappingURL=locale.d.ts.map

package/lib/typescript/module/utils/locale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale.d.ts","sourceRoot":"","sources":["../../../../src/utils/locale.ts"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAoB5B;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,GAAI,eAAe,OAAO,KAAG,MAOnE,CAAC;AAEF,eAAO,IAAI,aAAa,EAAE,MAAM,GAAG,SAAqB,CAAC;AAEzD,QAAA,MAAM,SAAS,GAAI,YAAY,MAAM,SAKpC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fattureincloud-mobile/fic-mobile-ds",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Official Design System for Fatture in Cloud Mobile",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
-  "types": "./lib/typescript/index.d.ts",
+  "types": "./lib/typescript/commonjs/index.d.ts",
   "files": [
     "src",
     "lib",
@@ -34,7 +34,8 @@
     "release": "dotenv release-it",
     "release:ci": "dotenv release-it --ci",
     "release:ni": "dotenv release-it --no-increment",
-    "release:rv": "dotenv release-it --release-version"
+    "release:rv": "dotenv release-it --release-version",
+    "yalc:push": "yarn build && yalc push"
   },
   "keywords": [
     "react-native",
@@ -86,6 +87,7 @@
     "react-native": "0.74.7",
     "react-native-builder-bob": "^0.20.0",
     "react-native-gesture-handler": "2.9.0",
+    "react-native-reanimated": "3.16.7",
     "react-test-renderer": "18.2.0",
     "release-it": "^15.0.0",
     "typescript": "5.0.4"

package/src/components/buttons/FicButton/FicButton.tsx

@@ -1,4 +1,3 @@
-// @ts-ignore TS6133
 import React from 'react';
 import { FicButtonProps } from './FicButton.types';
 import FicButtonIcon from './FicButtonIcon';
@@ -6,36 +5,29 @@ import FicButtonPrimary from './FicButtonPrimary';
 import FicButtonSecondary from './FicButtonSecondary';
 import FicButtonTertiary from './FicButtonTertiary';
 
+const buttonMap = {
+  icon: FicButtonIcon,
+  secondary: FicButtonSecondary,
+  tertiary: FicButtonTertiary,
+  primary: FicButtonPrimary,
+};
+
 const FicButton: React.FC<FicButtonProps> = ({
   type = 'primary',
   ...commonProps
 }) => {
-  const _iconPosition = commonProps.iconPosition
-    ? commonProps.iconPosition
-    : commonProps.iconName
-    ? 'left'
-    : undefined;
+  const _iconPosition =
+    commonProps.iconPosition ?? (commonProps.iconName ? 'left' : undefined);
 
-  const FButton = () => {
-    switch (type) {
-      case 'icon':
-        return <FicButtonIcon isPressable {...commonProps} />;
-      case 'secondary':
-        return (
-          <FicButtonSecondary iconPosition={_iconPosition} {...commonProps} />
-        );
-      case 'tertiary':
-        return (
-          <FicButtonTertiary iconPosition={_iconPosition} {...commonProps} />
-        );
-      default:
-        return (
-          <FicButtonPrimary iconPosition={_iconPosition} {...commonProps} />
-        );
-    }
-  };
+  const ButtonComponent = buttonMap[type] || FicButtonPrimary;
 
-  return <FButton />;
+  return (
+    <ButtonComponent
+      iconPosition={_iconPosition}
+      {...(type === 'icon' ? { isPressable: true } : {})}
+      {...commonProps}
+    />
+  );
 };
 
 export default FicButton;

package/src/components/buttons/FicButton/FicButtonIcon.tsx

@@ -1,15 +1,18 @@
-// @ts-ignore TS6133
 import * as React from 'react';
-import { FunctionComponent, useCallback, useMemo, useState } from 'react';
+import { FunctionComponent, useCallback, useMemo } from 'react';
 import {
   GestureResponderEvent,
   Platform,
   Pressable as PressableIOS,
-  StyleProp,
   View,
   ViewStyle,
 } from 'react-native';
 import { TouchableHighlight } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useTheme } from '../../../hooks/useTheme';
 import { Icon } from '../../../providers/IconProvider';
 import {
@@ -50,32 +53,26 @@ const FicButtonIcon: FunctionComponent<FicIconProps> = ({
     ? buttonTheme.error
     : buttonTheme.default;
 
-  const [isPressed, setIsPressed] = useState(false);
+  const pressedOpacity = useSharedValue(0);
 
-  const pressedAreaSize = useMemo(
-    () =>
-      customPressedIconAreaSize
-        ? customPressedIconAreaSize
-        : iconSize + INCREMENT_PRESSED_AREA_SIZE,
-    [iconSize, customPressedIconAreaSize]
-  );
+  const pressedAreaSize = customPressedIconAreaSize
+    ? customPressedIconAreaSize
+    : iconSize + INCREMENT_PRESSED_AREA_SIZE;
 
-  const pressableAreaStyle: StyleProp<ViewStyle> = useMemo(
-    () => ({
-      position: 'absolute',
-      top: ((pressedAreaSize - iconSize) / 2) * -1,
-      left: ((pressedAreaSize - iconSize) / 2) * -1,
-      width: pressedAreaSize ?? iconSize,
-      height: pressedAreaSize ?? iconSize,
-      borderRadius: pressedAreaSize / 6,
-      ...themeProps?.pressedStyle?.container,
-    }),
-    [iconSize, pressedAreaSize, themeProps]
-  );
+  const pressableAreaStyle = useAnimatedStyle<ViewStyle>(() => ({
+    position: 'absolute' as const,
+    top: ((pressedAreaSize - iconSize) / 2) * -1,
+    left: ((pressedAreaSize - iconSize) / 2) * -1,
+    width: pressedAreaSize ?? iconSize,
+    height: pressedAreaSize ?? iconSize,
+    borderRadius: pressedAreaSize / 6,
+    opacity: pressedOpacity.value,
+    ...themeProps?.pressedStyle?.container,
+  }));
 
-  const iconStyle: StyleProp<ViewStyle> = useMemo(
+  const iconStyle = useMemo(
     () => ({
-      textAlign: 'center',
+      textAlign: 'center' as const,
       lineHeight: iconSize,
       width: iconSize,
       height: iconSize,
@@ -89,28 +86,33 @@ const FicButtonIcon: FunctionComponent<FicIconProps> = ({
   );
 
   const iconColor = useMemo(() => {
-    return iconCustomColor
-      ? iconCustomColor
-      : colorContrastForLightTheme && !error
-      ? themeProps?.icon.colorContrastForLightTheme
-        ? themeProps?.icon.colorContrastForLightTheme
-        : themeProps?.icon.color
-      : themeProps?.icon.color;
+    if (iconCustomColor) return iconCustomColor;
+    if (error) return themeProps?.icon.color;
+
+    if (
+      colorContrastForLightTheme &&
+      themeProps?.icon?.colorContrastForLightTheme
+    )
+      return themeProps?.icon.colorContrastForLightTheme;
+
+    return themeProps?.icon.color;
   }, [colorContrastForLightTheme, error, themeProps, iconCustomColor]);
 
-  const handleOnPressIn: onPressType = (
-    e: GestureResponderEvent | undefined
-  ) => {
-    if (onPressIn) onPressIn(e);
-    setIsPressed(true);
-  };
+  const handleOnPressIn: onPressType = useCallback(
+    (e: GestureResponderEvent | undefined) => {
+      pressedOpacity.value = withTiming(1, { duration: 50 });
+      if (onPressIn) onPressIn(e);
+    },
+    [pressedOpacity, onPressIn]
+  );
 
-  const handleOnPressOut: onPressType = (
-    e: GestureResponderEvent | undefined
-  ) => {
-    if (onPressOut) onPressOut(e);
-    setIsPressed(false);
-  };
+  const handleOnPressOut: onPressType = useCallback(
+    (e: GestureResponderEvent | undefined) => {
+      pressedOpacity.value = withTiming(0, { duration: 50 });
+      if (onPressOut) onPressOut(e);
+    },
+    [pressedOpacity, onPressOut]
+  );
 
   const handleOnPress: onPressType = (e: GestureResponderEvent | undefined) => {
     if (onPress) onPress(e);
@@ -145,7 +147,7 @@ const FicButtonIcon: FunctionComponent<FicIconProps> = ({
 
   return (
     <View style={{ width: _iconSize, height: _iconSize }}>
-      {isPressed ? <View style={[pressableAreaStyle]} /> : null}
+      <Animated.View style={pressableAreaStyle} />
       <Pressable
         style={[themeProps?.container, containerStyle]}
         onPress={handleOnPress}

package/src/components/buttons/FicButton/FicButtonPrimary.tsx

@@ -137,7 +137,19 @@ const FicButtonPrimary: React.FC<FicButtonTextProps> = ({
         ) : null}
       </View>
     );
-  }, [iconPosition, iconName, iconSize, bodyStyle, title, ficPrimaryViewStyle, themeProps, solid, regular, light, duotone]);
+  }, [
+    iconPosition,
+    iconName,
+    iconSize,
+    bodyStyle,
+    title,
+    ficPrimaryViewStyle,
+    themeProps,
+    solid,
+    regular,
+    light,
+    duotone,
+  ]);
 
   return Platform.OS === 'android' ? (
     <TouchableHighlight

package/src/components/buttons/FicButton/FicButtonTertiary.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   GestureResponderEvent,
   Platform,
@@ -7,15 +7,31 @@ import {
   StyleProp,
   TextStyle,
   View,
-  ViewStyle
+  ViewStyle,
 } from 'react-native';
 import { TouchableHighlight } from 'react-native-gesture-handler';
+import Animated, {
+  runOnUI,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useTheme } from '../../../hooks/useTheme';
 import { Icon } from '../../../providers/IconProvider';
 import { PADDING } from '../../../styles/space';
 import { Body } from '../../typographies/Body';
-import { DEFAULT_ICON, DEFAULT_ICON_SIZE, DEFAULT_TITLE, HIT_SLOP, ICON_HORIZONTAL_MARGIN } from './constants';
-import { FicButtonTextProps, FicButtonThemeProps, onPressType } from './FicButton.types';
+import {
+  DEFAULT_ICON,
+  DEFAULT_ICON_SIZE,
+  DEFAULT_TITLE,
+  HIT_SLOP,
+  ICON_HORIZONTAL_MARGIN,
+} from './constants';
+import {
+  FicButtonTextProps,
+  FicButtonThemeProps,
+  onPressType,
+} from './FicButton.types';
 
 const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
   title,
@@ -34,17 +50,21 @@ const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
   regular,
   light,
   duotone,
-  containerStyle
+  containerStyle,
 }) => {
   const { ficButton: theme } = useTheme() || {};
 
   const Pressable = Platform.OS === 'ios' ? PressableIOS : TouchableHighlight;
 
   const buttonTheme = (theme?.['tertiary'] as FicButtonThemeProps) || {};
-  const themeProps = disabled ? buttonTheme.disabled : error ? buttonTheme.error : buttonTheme.default;
+  const themeProps = disabled
+    ? buttonTheme.disabled
+    : error
+    ? buttonTheme.error
+    : buttonTheme.default;
   const _containerStyle = containerStyle ?? {};
 
-  const [isPressed, setIsPressed] = useState(false);
+  const pressedOpacity = useSharedValue(0);
 
   const iconColor = useMemo(() => {
     return colorContrastForLightTheme && !error
@@ -66,51 +86,42 @@ const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
     () => ({
       marginLeft: iconPosition === 'left' ? ICON_HORIZONTAL_MARGIN : 0,
       marginRight: iconPosition === 'right' ? ICON_HORIZONTAL_MARGIN : 0,
-      textDecorationLine: themeProps?.text.textDecorationLine ?? 'underline'
+      textDecorationLine: themeProps?.text.textDecorationLine ?? 'underline',
     }),
-    [themeProps, iconPosition, isPressed, disabled]
+    [themeProps, iconPosition, disabled]
   );
 
-  const tertiaryPressedAreaStyle: StyleProp<ViewStyle> = useMemo(
-    () => ({
-      top: small ? -PADDING.SM : -PADDING.LG,
-      bottom: small ? -PADDING.SM : -PADDING.LG,
-      left: fullWidth ? 0 : PADDING.LG * -1,
-      right: fullWidth ? 0 : PADDING.LG * -1,
-      position: 'absolute',
-      ...themeProps?.pressedStyle?.container
-    }),
-    [small, themeProps, fullWidth]
-  );
+  const pressableAreaStyle = useAnimatedStyle<ViewStyle>(() => ({
+    top: small ? -PADDING.SM : -PADDING.LG,
+    bottom: small ? -PADDING.SM : -PADDING.LG,
+    left: fullWidth ? 0 : PADDING.LG * -1,
+    right: fullWidth ? 0 : PADDING.LG * -1,
+    position: 'absolute',
+    opacity: pressedOpacity.value,
+    ...themeProps?.pressedStyle?.container,
+  }));
+
+  const animate = (value: number) => {
+    'worklet';
+    pressedOpacity.value = withTiming(value, { duration: 0 });
+  };
 
-  const dynamicContainerStyle: StyleProp<ViewStyle> = useMemo(
-    () => ({
-      paddingTop: small ? PADDING.SM : PADDING.LG,
-      paddingBottom: small ? PADDING.SM : PADDING.LG,
-      width: '100%',
-      ...(isPressed ? themeProps?.pressedStyle?.container : themeProps?.container)
-    }),
-    [disabled, themeProps, isPressed]
+  const handleOnPressIn: onPressType = useCallback(
+    (e: GestureResponderEvent | undefined) => {
+      runOnUI(animate)(1);
+      if (onPressIn) onPressIn(e);
+    },
+    [pressedOpacity, onPressIn]
   );
 
-  const dynamicContainerStyleContainer: StyleProp<ViewStyle> = useMemo(
-    () => ({
-      width: '100%',
-      ...(isPressed ? themeProps?.pressedStyle?.container : themeProps?.container)
-    }),
-    [disabled, themeProps, isPressed]
+  const handleOnPressOut: onPressType = useCallback(
+    (e: GestureResponderEvent | undefined) => {
+      runOnUI(animate)(0);
+      if (onPressOut) onPressOut(e);
+    },
+    [pressedOpacity, onPressOut]
   );
 
-  const handleOnPressIn: onPressType = (e: GestureResponderEvent | undefined) => {
-    if (onPressIn) onPressIn(e);
-    setIsPressed(true);
-  };
-
-  const handleOnPressOut: onPressType = (e: GestureResponderEvent | undefined) => {
-    if (onPressOut) onPressOut(e);
-    setIsPressed(false);
-  };
-
   const handleOnPress: onPressType = (e: GestureResponderEvent | undefined) => {
     if (onPress) onPress(e);
   };
@@ -129,7 +140,11 @@ const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
             duotone={duotone}
           />
         ) : null}
-        <Body text={title ?? DEFAULT_TITLE} style={bodyStyle} color={bodyColor} />
+        <Body
+          text={title ?? DEFAULT_TITLE}
+          style={bodyStyle}
+          color={bodyColor}
+        />
         {iconPosition === 'right' ? (
           <Icon
             name={iconName || DEFAULT_ICON}
@@ -143,33 +158,28 @@ const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
         ) : null}
       </>
     );
-  }, [iconPosition, iconName, iconSize, buttonTheme, disabled, error, bodyStyle, title]);
-
-  return fullWidth ? (
-    <Pressable
-      style={[dynamicContainerStyle, Platform.OS === 'ios' ? _containerStyle : {}]}
-      containerStyle={[dynamicContainerStyleContainer, _containerStyle]}
-      onPress={handleOnPress}
-      onPressIn={handleOnPressIn}
-      onPressOut={handleOnPressOut}
-      disabled={disabled}
-      hitSlop={HIT_SLOP}
-      underlayColor={'transparent'}
-    >
-      {FicTertiary()}
-    </Pressable>
-  ) : (
+  }, [
+    iconPosition,
+    iconName,
+    iconSize,
+    buttonTheme,
+    disabled,
+    error,
+    bodyStyle,
+    title,
+  ]);
+
+  return (
     <View
       style={[
         {
-          position: 'relative',
-          alignSelf: 'flex-start',
-          width: fullWidth ? '100%' : 'auto'
+          width: fullWidth ? '100%' : 'auto',
+          alignSelf: fullWidth ? 'stretch' : 'flex-start',
         },
-        _containerStyle
+        _containerStyle,
       ]}
     >
-      {isPressed ? <View style={[tertiaryPressedAreaStyle]} /> : null}
+      <Animated.View style={pressableAreaStyle} />
       <Pressable
         style={themeProps?.container}
         onPress={handleOnPress}