Fix: Sticker selection via tap works now, prevents event bubbling to canvas

src/components/DraggableSticker.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   useSharedValue,
@@ -104,13 +104,7 @@ export default function DraggableSticker({
       );
     });
 
-  const tapGesture = Gesture.Tap()
-    .onEnd(() => {
-      runOnJS(selectSticker)();
-    });
-
-  const composedDrag = Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture);
-  const gesture = Gesture.Exclusive(composedDrag, tapGesture);
+  const gesture = Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture);
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [
@@ -126,13 +120,17 @@ export default function DraggableSticker({
   return (
     <GestureDetector gesture={gesture}>
       <Animated.View style={[styles.stickerContainer, animatedStyle]}>
-        {isText ? (
-          <View style={styles.textStickerBox}>
-            <Text style={styles.textStickerContent}>{sticker.content}</Text>
+        <TouchableWithoutFeedback onPress={selectSticker}>
+          <View>
+            {isText ? (
+              <View style={styles.textStickerBox}>
+                <Text style={styles.textStickerContent}>{sticker.content}</Text>
+              </View>
+            ) : (
+              <Text style={styles.emojiText}>{sticker.content}</Text>
+            )}
           </View>
-        ) : (
-          <Text style={styles.emojiText}>{sticker.content}</Text>
-        )}
+        </TouchableWithoutFeedback>
       </Animated.View>
     </GestureDetector>
   );