fix: [IOPLT-997] Fix visual issue on dark mode version of TabItem (#420)

## Short description
This PR fixes a visual issue that was present in the dark mode version
of the `TabItem` component.

## List of changes proposed in this pull request
- Remove the `useAnimatedStyle` dependency in the `TabItem` component,
which was probably causing the buggy behavior
- Remove the `fullWidth` prop because it was never referenced or
officially supported
- Slightly refactor `TabNavigation` to replace old logic with the new
`gap` property

### Preview
> [!note]
> Please note the border of the selected state, before and after

| Before | After |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/b80b0bbd-2c6f-4d90-9119-6f80faea814f"
/> | <video
src="https://github.com/user-attachments/assets/ed061deb-7b13-4ed5-ac44-0bdfbac87585"
/> |

## How to test
There's no easy way to replicate the buggy behavior in the example app
included in this repo. But you can test the behavior in the `io-app`
repo by updating the `"@pagopa/io-app-design-system"` field in the
`package.json` with the PR `https` url of this PR:
```json
"@pagopa/io-app-design-system": "https://github.com/pagopa/io-app-design-system#IOPLT-997-fix-visual-issue-tabitem-darkmode"
```

Co-authored-by: Emanuele Dall'Ara <[email protected]>

Author: dmnplb

src/components/tabs/TabItem.tsx

@@ -33,7 +33,6 @@ export type TabItem = WithTestID<{
   label: string;
   color?: ColorMode;
   selected?: boolean;
-  fullWidth?: boolean;
   // Icons
   icon?: IOIcons;
   iconSelected?: IOIcons;
@@ -69,7 +68,6 @@ const TabItem = forwardRef(
       label,
       color = "light",
       selected = false,
-      fullWidth = false,
       accessibilityLabel,
       accessibilityHint,
       testID,
@@ -149,27 +147,24 @@ const TabItem = forwardRef(
     );
 
     // Interpolate animation values from `pressed` values
-    const animatedStyle = useAnimatedStyle(
-      () => ({
-        backgroundColor: interpolateColor(
-          selectedStateTransition.value,
-          [0, 1],
-          [
-            mapColorStates[color].background.default,
-            mapColorStates[color].background.selected
-          ]
-        ),
-        borderColor: interpolateColor(
-          selectedStateTransition.value,
-          [0, 1],
-          [
-            mapColorStates[color].border.default,
-            mapColorStates[color].border.selected
-          ]
-        )
-      }),
-      [selectedStateTransition]
-    );
+    const animatedStyle = useAnimatedStyle(() => ({
+      backgroundColor: interpolateColor(
+        selectedStateTransition.value,
+        [0, 1],
+        [
+          mapColorStates[color].background.default,
+          mapColorStates[color].background.selected
+        ]
+      ),
+      borderColor: interpolateColor(
+        selectedStateTransition.value,
+        [0, 1],
+        [
+          mapColorStates[color].border.default,
+          mapColorStates[color].border.selected
+        ]
+      )
+    }));
 
     const activeIcon = selected ? iconSelected ?? icon : icon;
 
@@ -203,7 +198,6 @@ const TabItem = forwardRef(
             { columnGap: 4 },
             !disabled && !reducedMotion && scaleAnimatedStyle,
             animatedStyle,
-            fullWidth && styles.fullWidth,
             disabled && { opacity: DISABLED_OPACITY }
           ]}
         >
@@ -235,9 +229,6 @@ const styles = StyleSheet.create({
     borderCurve: "continuous",
     justifyContent: "center",
     alignSelf: "flex-start"
-  },
-  fullWidth: {
-    alignSelf: "auto"
   }
 });
 

src/components/tabs/TabNavigation.tsx

@@ -56,9 +56,6 @@ const TabNavigation = ({
       key={index}
       style={[
         styles.item,
-        {
-          marginEnd: index === React.Children.count(children) - 1 ? 0 : 8
-        },
         stretchItems && {
           minWidth: itemMinWidth
         }
@@ -87,7 +84,8 @@ const TabNavigation = ({
           : {},
         {
           flexGrow: 1,
-          justifyContent: itemsJustify[tabAlignment]
+          justifyContent: itemsJustify[tabAlignment],
+          gap: 8
         }
       ]}
     >