khadinakbarlabs/expo-mobile-app-builder/add-reanimated

npm exec --no -- expo install react-native-reanimated react-native-gesture-handler react-native-worklets

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-worklets/plugin'],  // MUST be last
  };
};

import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
function HeartButton() {
  const scale = useSharedValue(1);
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));
  const handlePress = () => {
    scale.value = withSpring(1.4, { damping: 8 }, () => {
      scale.value = withSpring(1);
    });
  };
  return (
    <Pressable onPress={handlePress}>
      <Animated.View style={animatedStyle}>
        <Image source={require('./heart.png')} />
      </Animated.View>
    </Pressable>
  );
}

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
const drag = Gesture.Pan().onUpdate((e) => {
  translateX.value = e.translationX;
}).onEnd(() => {
  translateX.value = withSpring(0);
});
<GestureDetector gesture={drag}>
  <Animated.View style={[styles.card, animatedStyle]} />
</GestureDetector>

import { AccessibilityInfo } from 'react-native';
const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled();
scale.value = reduceMotion ? withTiming(1.4, { duration: 0 }) : withSpring(1.4);