1import { View, Image } from 'react-native';
2import { TapGestureHandler } from 'react-native-gesture-handler';
3import Animated, {
4  useSharedValue,
5  useAnimatedGestureHandler,
6  useAnimatedStyle,
7  withSpring,
8} from 'react-native-reanimated';
9
10const AnimatedImage = Animated.createAnimatedComponent(Image);
11
12export default function EmojiSticker({ imageSize, stickerSource }) {
13  const scaleImage = useSharedValue(imageSize);
14
15  const onDoubleTap = useAnimatedGestureHandler({
16    onActive: () => {
17      if (scaleImage.value !== imageSize * 2) {
18        scaleImage.value = scaleImage.value * 2;
19      }
20    },
21  });
22
23  const imageStyle = useAnimatedStyle(() => {
24    return {
25      width: withSpring(scaleImage.value),
26      height: withSpring(scaleImage.value),
27    };
28  });
29
30  return (
31    <View style={{ top: -350 }}>
32      <TapGestureHandler onGestureEvent={onDoubleTap} numberOfTaps={2}>
33        <AnimatedImage
34          source={stickerSource}
35          resizeMode="contain"
36          style={[imageStyle, { width: imageSize, height: imageSize }]}
37        />
38      </TapGestureHandler>
39    </View>
40  );
41}
42