chore: refactoring tabs to reduce duplication and complexity

Author: georgewrmarshall

app/component-library/components-temp/Tabs/Tab/Tab.tsx

@@ -1,6 +1,6 @@
 // Third party dependencies.
-import React, { useRef, useCallback } from 'react';
-import { Pressable, View } from 'react-native';
+import React, { useRef, useEffect } from 'react';
+import { Pressable, Animated } from 'react-native';
 
 // External dependencies.
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
@@ -9,6 +9,7 @@ import {
   TextVariant,
   FontWeight,
 } from '@metamask/design-system-react-native';
+import { AnimationDuration } from '../../../constants/animation.constants';
 
 // Internal dependencies.
 import { TabProps } from './Tab.types';
@@ -19,67 +20,69 @@ const Tab: React.FC<TabProps> = ({
   isDisabled = false,
   onPress,
   testID,
-  onLayout,
   ...pressableProps
 }) => {
   const tw = useTailwind();
-  const viewRef = useRef<View>(null);
+  const scaleAnim = useRef(new Animated.Value(isActive ? 1 : 0)).current;
 
-  const handleOnLayout = useCallback(
-    (layoutEvent: Parameters<NonNullable<typeof onLayout>>[0]) => {
-      if (onLayout) {
-        onLayout(layoutEvent);
-      }
-    },
-    [onLayout],
-  );
+  useEffect(() => {
+    Animated.timing(scaleAnim, {
+      toValue: isActive && !isDisabled ? 1 : 0,
+      duration: AnimationDuration.Fast,
+      useNativeDriver: true,
+    }).start();
+  }, [isActive, isDisabled, scaleAnim]);
 
   return (
-    <View
-      ref={viewRef}
-      onLayout={handleOnLayout}
-      style={tw.style('flex-shrink-0')}
+    <Pressable
+      style={tw.style(
+        'flex-shrink-0 px-0 py-1 flex-row items-center justify-center relative',
+        isDisabled && 'opacity-50',
+      )}
+      onPress={isDisabled ? undefined : onPress}
+      disabled={isDisabled}
+      testID={testID}
+      {...pressableProps}
     >
-      <Pressable
-        style={tw.style(
-          'px-0 py-1 flex-row items-center justify-center relative',
-          isDisabled && 'opacity-50',
-        )}
-        onPress={isDisabled ? undefined : onPress}
-        disabled={isDisabled}
-        testID={testID}
-        {...pressableProps}
+      {/* Hidden bold text that determines layout size */}
+      <Text
+        variant={TextVariant.BodyMd}
+        fontWeight={FontWeight.Bold}
+        numberOfLines={1}
+        style={tw.style('opacity-0')}
+      >
+        {label}
+      </Text>
+
+      {/* Visible text positioned absolutely over the hidden text */}
+      <Text
+        variant={TextVariant.BodyMd}
+        fontWeight={
+          isActive && !isDisabled ? FontWeight.Bold : FontWeight.Regular
+        }
+        twClassName={
+          isDisabled
+            ? 'text-muted'
+            : isActive
+              ? 'text-default'
+              : 'text-alternative'
+        }
+        numberOfLines={1}
+        style={tw.style('absolute inset-0 flex items-center justify-center')}
       >
-        {/* Hidden bold text that determines layout size */}
-        <Text
-          variant={TextVariant.BodyMd}
-          fontWeight={FontWeight.Bold}
-          numberOfLines={1}
-          style={tw.style('opacity-0')}
-        >
-          {label}
-        </Text>
+        {label}
+      </Text>
 
-        {/* Visible text positioned absolutely over the hidden text */}
-        <Text
-          variant={TextVariant.BodyMd}
-          fontWeight={
-            isActive && !isDisabled ? FontWeight.Bold : FontWeight.Regular
-          }
-          twClassName={
-            isDisabled
-              ? 'text-muted'
-              : isActive
-                ? 'text-default'
-                : 'text-alternative'
-          }
-          numberOfLines={1}
-          style={tw.style('absolute inset-0 flex items-center justify-center')}
-        >
-          {label}
-        </Text>
-      </Pressable>
-    </View>
+      {/* Animated underline */}
+      <Animated.View
+        style={[
+          tw.style('absolute bottom-0 left-0 right-0 h-0.5 bg-icon-default'),
+          {
+            transform: [{ scaleX: scaleAnim }],
+          },
+        ]}
+      />
+    </Pressable>
   );
 };
 

app/component-library/components-temp/Tabs/Tab/Tab.types.ts

@@ -1,5 +1,5 @@
 // Third party dependencies.
-import { PressableProps, LayoutChangeEvent } from 'react-native';
+import { PressableProps } from 'react-native';
 
 /**
  * Tab component props
@@ -21,8 +21,4 @@ export interface TabProps extends PressableProps {
    * Callback when tab is pressed
    */
   onPress: () => void;
-  /**
-   * Callback when tab layout changes
-   */
-  onLayout?: (event: LayoutChangeEvent) => void;
 }