App.tsx

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Pressable, View } from "react-native";
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
} from "react-native-reanimated";

const FAB_SIZE = 70;
const INITIAL_COLOR = "#d00000";
const FINAL_COLOR = "#4BB543";

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

export default function App() {
  const progress = useSharedValue<0 | 1>(0);

  const FabStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        progress.value,
        [0, 1],
        [INITIAL_COLOR, FINAL_COLOR]
      ),
    };
  }, []);

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <AnimatedPressable
        style={[styles.fabContainer, FabStyle]}
        onPress={() => (progress.value = 1)}
        onLongPress={() => (progress.value = 0)}
      ></AnimatedPressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  fabContainer: {
    position: "absolute",
    bottom: 30,
    right: 30,
    width: FAB_SIZE,
    height: FAB_SIZE,
    borderRadius: FAB_SIZE / 2,
    backgroundColor: INITIAL_COLOR,
    elevation: 5,
  },
});