ui: Add tap gesture

- Note: There's a bug with the Reanimiated lib; applying fix found at
  software-mansion/react-native-reanimated#3355 (comment)

App.jsx

@@ -14,6 +14,11 @@ import EmojiSticker from "./components/EmojiSticker";
 
 const PlaceholderImage = require("./assets/images/background-image.png");
 
+// FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355
+if (typeof window !== "undefined" && !window._frameTimestamp) {
+  window._frameTimestamp = null;
+}
+
 export default function App() {
   const [showAppOptions, setShowAppOptions] = useState(false);
   const [selectedImage, setSelectedImage] = useState(null);

components/EmojiSticker.jsx

@@ -1,13 +1,39 @@
 import { View, Image } from "react-native";
+import { TapGestureHandler } from "react-native-gesture-handler";
+import Animated, {
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+
+const AnimatedImage = Animated.createAnimatedComponent(Image);
 
 export default function EmojiSticker({ imageSize, stickerSource }) {
+  const scaleImage = useSharedValue(imageSize);
+  const imageStyle = useAnimatedStyle(() => {
+    return {
+      width: withSpring(scaleImage.value),
+      height: withSpring(scaleImage.value),
+    };
+  });
+  const onDoubleTap = useAnimatedGestureHandler({
+    onActive: () => {
+      if (scaleImage.value !== imageSize * 2) {
+        scaleImage.value = scaleImage.value * 2;
+      }
+    },
+  });
+
   return (
     <View style={{ top: -350 }}>
-      <Image
-        source={stickerSource}
-        resizeMode="contain"
-        style={{ width: imageSize, height: imageSize }}
-      />
+      <TapGestureHandler onGestureEvent={onDoubleTap} numberOfTaps={2}>
+        <AnimatedImage
+          source={stickerSource}
+          resizeMode="contain"
+          style={[imageStyle, { width: imageSize, height: imageSize }]}
+        />
+      </TapGestureHandler>
     </View>
   );
 }