feat(client): animate button

apps/client/babel.config.js

@@ -5,5 +5,9 @@ module.exports = function (api) {
       ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
       'nativewind/babel',
     ],
+    plugins: [
+      '@babel/plugin-proposal-export-namespace-from',
+      'react-native-reanimated/plugin',
+    ],
   }
 }

apps/client/components/ui/button.tsx

@@ -1,20 +1,55 @@
-import { Pressable, PressableProps, Text } from 'react-native'
+import { PressableProps, Text } from 'react-native'
+import { Pressable } from 'react-native'
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated'
 import { cn } from '@/lib/cn'
 
 type ButtonProps = {
   title: string
 } & PressableProps
 
+const DURATION = 300
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
 export function Button({ className, title, ...props }: ButtonProps) {
+  const transition = useSharedValue(0)
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          scale: interpolate(transition.value, [0, 1], [1, 0.98]),
+        },
+      ],
+    }
+  })
+
   return (
-    <Pressable
+    <AnimatedPressable
       {...props}
+      style={animatedStyle}
+      onPressIn={() => {
+        transition.value = withTiming(1, { duration: DURATION })
+      }}
+      onPressOut={() => {
+        transition.value = withTiming(0, { duration: DURATION })
+      }}
       className={cn(
         'items-center justify-center rounded-md bg-primary p-2',
         className
       )}
     >
-      <Text className="text-primary-foreground">{title}</Text>
-    </Pressable>
+      <Text className="text-primary-foreground" selectable={false}>
+        {title}
+      </Text>
+    </AnimatedPressable>
   )
 }

apps/client/package.json

@@ -16,6 +16,7 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@clerk/clerk-expo": "^2.7.3",
     "@clerk/types": "^4.45.0",
     "@expo/vector-icons": "^14.0.2",