ThumbsupReactNativeAnimation.js

import React, { useState } from 'react';
import { Animated, TouchableOpacity, View, StyleSheet } from 'react-native';

const AnimationCompletionCriteria = () => {
  const scaleRotate = useState(new Animated.Value(0))[0];

  const rotation = scaleRotate.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '-45deg'],
  });

  const scale = scaleRotate.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 1.5],
  });

  const handlePress = () => {
    Animated.sequence([
      Animated.spring(scaleRotate, {
        toValue: 1,
        friction: 15,
        tension: 170,
        useNativeDriver: true,
      }),
      Animated.spring(scaleRotate, {
        toValue: 0,
        friction: 15,
        tension: 170,
        useNativeDriver: true,
      }),
    ]).start();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handlePress}>
        <Animated.Text
          style={{
            ...styles.animatedText,
            transform: [{ rotate: rotation }, { scale: scale }],
          }}
        >
          👍
        </Animated.Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  animatedText: {
    fontSize: 50,
    transformOrigin: 'bottom left',
  },
});

export default AnimationCompletionCriteria;