feat: migrate PressableArea and TabBarButton to react-native-ease

- Add react-native-ease dependency for lightweight native animations
- Migrate PressableArea: replace Reanimated opacity with EaseView
- Migrate TabBarButton: replace Reanimated scale with EaseView spring
- Add Jest mock for react-native-ease in test setup
- Update investigation doc with implementation status

Author: cursoragent

package.json

@@ -154,6 +154,7 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-compressor": "^1.13.0",
+    "react-native-ease": "^0.2.0",
     "react-native-edge-to-edge": "1.6.0",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.28.0",

src/components/PressableArea/PressableArea.tsx

@@ -1,34 +1,36 @@
-import { PropsWithChildren, Ref, forwardRef } from 'react';
+import { PropsWithChildren, Ref, forwardRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { Pressable, PressableProps, View } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+import { EaseView } from 'react-native-ease';
 
 export const PressableArea = forwardRef(
   (props: PropsWithChildren<PressableProps>, ref: Ref<View>) => {
-    const opacity = useSharedValue(1);
+    const [pressed, setPressed] = useState(false);
 
-    const animatedStyle = useAnimatedStyle(() => ({
-      opacity: opacity.value,
-    }));
+    const { onPressIn, onPressOut, style, children, ...rest } = props;
 
     return (
-      <AnimatedPressable
-        {...props}
+      <Pressable
+        {...rest}
         ref={ref}
-        style={[props.style, animatedStyle]}
-        onPressIn={() => {
-          opacity.value = withTiming(0.75, { duration: 150 });
+        style={style}
+        onPressIn={e => {
+          setPressed(true);
+          onPressIn?.(e);
         }}
-        onPressOut={() => {
-          opacity.value = withTiming(1, { duration: 150 });
+        onPressOut={e => {
+          setPressed(false);
+          onPressOut?.(e);
         }}
-      />
+      >
+        <EaseView
+          animate={{ opacity: pressed ? 0.75 : 1 }}
+          transition={{ type: 'timing', duration: 150 }}
+          style={[{ flex: 1 }]}
+        >
+          {children}
+        </EaseView>
+      </Pressable>
     );
   },
 );

src/components/TabBarButton/TabBarButton.tsx

@@ -1,5 +1,5 @@
 import * as Haptics from 'expo-haptics';
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, useState } from 'react';
 import {
   AccessibilityState,
   GestureResponderEvent,
@@ -8,13 +8,7 @@ import {
   Pressable,
   StyleSheet,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
-
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+import { EaseView } from 'react-native-ease';
 
 interface TabBarButtonProps {
   icon: FC<{ color: string }>;
@@ -33,11 +27,7 @@ export function TabBarButton({
 }: TabBarButtonProps) {
   const focused = accessibilityState?.selected;
   const color = focused ? activeTintColor : inactiveTintColor;
-  const scale = useSharedValue(1);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: scale.value }],
-  }));
+  const [pressed, setPressed] = useState(false);
 
   const handlePress = (e: GestureResponderEvent) => {
     if (Platform.OS !== 'web') {
@@ -49,18 +39,24 @@ export function TabBarButton({
   };
 
   return (
-    <AnimatedPressable
+    <Pressable
       onPress={handlePress}
-      onPressIn={() => {
-        scale.value = withSpring(0.92);
-      }}
-      onPressOut={() => {
-        scale.value = withSpring(1);
-      }}
-      style={[styles.pressable, animatedStyle]}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={styles.pressable}
     >
-      {icon({ color }) as ReactNode}
-    </AnimatedPressable>
+      <EaseView
+        animate={{ scale: pressed ? 0.92 : 1 }}
+        transition={{
+          type: 'spring',
+          damping: 25,
+          stiffness: 300,
+        }}
+        style={styles.pressable}
+      >
+        {icon({ color }) as ReactNode}
+      </EaseView>
+    </Pressable>
   );
 }
 

test/setupTests.ts

@@ -131,3 +131,12 @@ jest.mock('expo-updates');
 jest.mock('expo/fetch');
 
 jest.mock('pressto');
+
+jest.mock('react-native-ease', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  return {
+    EaseView: ({ children, style, ...rest }: { children?: React.ReactNode; style?: unknown }) =>
+      React.createElement(View, { ...rest, style }, children),
+  };
+});