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

This commit is contained in:
2026-06-13 00:04:02 +02:00
parent 76a8eef97c
commit 551d5a02ca
+6 -8
View File
@@ -1,5 +1,5 @@
import React from 'react'; 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 { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { import Animated, {
useSharedValue, useSharedValue,
@@ -104,13 +104,7 @@ export default function DraggableSticker({
); );
}); });
const tapGesture = Gesture.Tap() const gesture = Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture);
.onEnd(() => {
runOnJS(selectSticker)();
});
const composedDrag = Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture);
const gesture = Gesture.Exclusive(composedDrag, tapGesture);
const animatedStyle = useAnimatedStyle(() => ({ const animatedStyle = useAnimatedStyle(() => ({
transform: [ transform: [
@@ -126,6 +120,8 @@ export default function DraggableSticker({
return ( return (
<GestureDetector gesture={gesture}> <GestureDetector gesture={gesture}>
<Animated.View style={[styles.stickerContainer, animatedStyle]}> <Animated.View style={[styles.stickerContainer, animatedStyle]}>
<TouchableWithoutFeedback onPress={selectSticker}>
<View>
{isText ? ( {isText ? (
<View style={styles.textStickerBox}> <View style={styles.textStickerBox}>
<Text style={styles.textStickerContent}>{sticker.content}</Text> <Text style={styles.textStickerContent}>{sticker.content}</Text>
@@ -133,6 +129,8 @@ export default function DraggableSticker({
) : ( ) : (
<Text style={styles.emojiText}>{sticker.content}</Text> <Text style={styles.emojiText}>{sticker.content}</Text>
)} )}
</View>
</TouchableWithoutFeedback>
</Animated.View> </Animated.View>
</GestureDetector> </GestureDetector>
); );