awesome FAB animation

Author: flexbox

hackathon/spacecraft/src/components/StarshipCard.tsx

@@ -12,25 +12,10 @@ import Animated, {
 import type { StarshipProps } from "../../api/types";
 import { useImage } from "../hooks/useImage";
 import { Routes } from "../navigation/Routes";
+import { withAnimated } from "../utils/withAnimated";
 
 import { Image } from "~/components/Image";
 
-export function withAnimated<T extends object>(
-  WrappedComponent: React.ComponentType<T>
-): React.ComponentClass<AnimateProps<T>, any> {
-  const displayName =
-    WrappedComponent.displayName || WrappedComponent.name || "Component";
-
-  class WithAnimated extends React.Component<T, any> {
-    static displayName = `WithAnimated(${displayName})`;
-
-    render(): React.ReactNode {
-      return <WrappedComponent {...this.props} />;
-    }
-  }
-  return Animated.createAnimatedComponent(WithAnimated);
-}
-
 const AnimatedCard = withAnimated(Card);
 
 export interface StarshipCardProps {

hackathon/spacecraft/src/screens/StarshipDetailsScreen.tsx

@@ -2,13 +2,18 @@ import { FontAwesome5 } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import {
+  Pressable,
   View,
   StyleSheet,
   TouchableOpacity,
   ScrollView,
   Alert,
 } from "react-native";
 import { Text, DataTable, List, FAB, Chip } from "react-native-paper";
+import { withAnimated } from "~/utils/withAnimated";
+
+const AnimatedFAB = withAnimated(FAB);
+import { useSharedValue, withSpring } from "react-native-reanimated";
 
 import type { StarshipProps } from "../../api/types";
 
@@ -46,9 +51,11 @@ export const StarshipDetailsScreen = ({
   };
 
   const handleBuy = () => {
-    Alert.alert("Give me the money!");
+    // Alert.alert("Give me the money!");
   };
 
+  const scale = useSharedValue(1);
+
   return (
     <View>
       <ScrollView>
@@ -109,12 +116,30 @@ export const StarshipDetailsScreen = ({
         </View>
       </ScrollView>
 
-      <FAB
-        style={styles.fab}
-        label="Buy this ship"
-        icon="cart"
+      <Pressable
+        onPressIn={() => {
+          scale.value = withSpring(0.9);
+        }}
+        onPressOut={() => {
+          scale.value = withSpring(1);
+        }}
         onPress={handleBuy}
-      />
+      >
+        <AnimatedFAB
+          style={[
+            styles.fab,
+            {
+              transform: [
+                {
+                  scale,
+                },
+              ],
+            },
+          ]}
+          label="Buy this ship"
+          icon="cart"
+        />
+      </Pressable>
     </View>
   );
 };

hackathon/spacecraft/src/utils/withAnimated.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import Animated, { AnimateProps } from "react-native-reanimated";
+
+export function withAnimated<T extends object>(
+  WrappedComponent: React.ComponentType<T>
+): React.ComponentClass<AnimateProps<T>, any> {
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || "Component";
+
+  class WithAnimated extends React.Component<T, any> {
+    static displayName = `WithAnimated(${displayName})`;
+
+    render(): React.ReactNode {
+      return <WrappedComponent {...this.props} />;
+    }
+  }
+  return Animated.createAnimatedComponent(WithAnimated);
+}