برای پیاده سازی چنین انیمیشنی دو مرحله اصلی داریم:

1- وقتی کاربر دو بار روی عکس کلیک می کند را تشخیص دهیم.

2- و بعد عکسی خاص (مثلاً یک قلب) را با انیمیشن نشان دهیم.

1- تشخیص double tap

کلاً برای تشخیص تعامل کاربر با اپ (مثلاً تشخیص کلیک ها) از کتابخانهreact-native-gesture-handler استفاده می کنیم. با دستور npm install react-native-gesture-handler –save  نصبش کنید و بصورت زیر TapGestureHandler را ایمپورت کنید:

import { TapGestureHandler} from 'react-native-gesture-handler';

حالا به صورت زیر می توانید از آن استفاده کنید:

<TapGestureHandler
            numberOfTaps={2}
            onActivated={onDoubleTap}> 
                
                    <ImageBackground
                    
                    style={styles.pic} 
                    source={{uri: process.env.REACT_APP_BACK+'/posts/'+  props.post?.file}}>
                    
                    {/* like animation: */}
                    <Animated.View style={rStyle}>
                    <Image style={styles.heartPic}  source={require('../../assets/icons/heart-filled.png')}></Image>
                    </Animated.View>

                    </ImageBackground>
               

                     }
                    
                  
    </TapGestureHandler>
        

*در این کد، من یک عکس قلب را روی ImageBackground نمایش می دهم، به همراه انیمیشن (انیمیشن را با Animated.View پیاده سازی می کنم که در ادامه توضیح می دهم)

*متد onDoubleTap تابعی است که به هنگام دو بار کلیک کردن کاربر اجرا می شود که وظیفه نشان دادن انیمیشن را دارد. ( اگر numberOfTaps={1} باشد، این متد با یکبار کلیک کاربر فراخوانی می شود)

2- نمایش عکس با انیمیشن

برای ساخت انیمیشن، کتابخانه react-native-reanimated را نصب کنید. متد onDoubleTap بصورت زیر نوشته می شود:

import Animated, { useSharedValue, withSpring, useAnimatedStyle, withTiming } from 'react-native-reanimated';

// like animation:
    const scale = useSharedValue(0);
    const opacity = useSharedValue(1);
    const rStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
    opacity: opacity.value,
    }));

    const onDoubleTap = async () => {
      
        scale.value = withSpring(1, {}, () => {
           
            // Reset animation values after completion
            scale.value = withTiming(0, { duration: 500 });
            opacity.value = withTiming(1, { duration: 500 });
          });
        
        // like:
        if(!liked)
          like();

    };