animated tab bar

src/components/PressableScale.js

@@ -0,0 +1,68 @@
+import React, { useCallback, useEffect } from "react";
+import { Pressable } from "react-native";
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+
+export default function PressableScale({
+  children,
+  onPress,
+  style,
+  contentStyle,
+  hitSlop = 8,
+  disabled = false,
+  scaleTo = 1.5,
+  spring = { damping: 18, stiffness: 220, mass: 0.8 },
+  ...rest
+}) {
+  const sv = useSharedValue(1);
+
+  const rStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: sv.value }],
+  }));
+
+  const pressIn = useCallback(() => {
+    if (disabled) return;
+    cancelAnimation(sv);
+    sv.value = 1;
+    sv.value = withSpring(scaleTo, spring);
+  }, [disabled, scaleTo, spring, sv]);
+
+  const reset = useCallback(() => {
+    cancelAnimation(sv);
+    sv.value = withSpring(1, spring);
+  }, [spring, sv]);
+
+  useEffect(
+    () => () => {
+      cancelAnimation(sv);
+      sv.value = 1;
+    },
+    [sv]
+  );
+
+  return (
+    <Pressable
+      onPressIn={pressIn}
+      onPressOut={reset}
+      onTouchCancel={reset}
+      onHoverOut={reset} // web
+      onMouseUp={reset} // web
+      onMouseLeave={reset} // web
+      onBlur={reset}
+      onPress={(e) => {
+        onPress?.(e);
+        reset();
+      }}
+      hitSlop={hitSlop}
+      disabled={disabled}
+      style={style}
+      {...rest}
+    >
+      <Animated.View style={[contentStyle, rStyle]}>{children}</Animated.View>
+    </Pressable>
+  );
+}