React Native Expo вылетает приложение при использовании библиотеки gesture-handler
import { StyleSheet, Text, View, Image } from "react-native";
import ges from "./assets/ges.jpg";
import { useSharedValue, useAnimatedStyle } from "react-native-reanimated";
import {
GestureDetector,
Gesture,
GestureHandlerRootView,
} from "react-native-gesture-handler"; // Добавлен GestureHandlerRootView
import Animated from "react-native-reanimated";
import { useState } from "react";
export default function App() {
const MIN_SCALE = 1;
const MAX_SCALE = 3;
const offset = useSharedValue({ x: 0, y: 0 });
const start = useSharedValue({ x: 0, y: 0 });
const scale = useSharedValue(1);
const savedScale = useSharedValue(1);
const [ballPosition, setBallPosition] = useState({ x: 0, y: 0 });
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [
{ translateX: offset.value.x },
{ translateY: offset.value.y },
{ scale: scale.value },
],
};
});
const dragGesture = Gesture.Pan()
.averageTouches(true)
.onUpdate((e) => {
offset.value = {
x: e.translationX + start.value.x,
y: e.translationY + start.value.y,
};
})
.onEnd(() => {
start.value = {
x: offset.value.x,
y: offset.value.y,
};
});
const zoomGesture = Gesture.Pinch()
.onUpdate((event) => {
let newScale = savedScale.value * event.scale;
if (newScale < MIN_SCALE) {
newScale = MIN_SCALE;
} else if (newScale > MAX_SCALE) {
newScale = MAX_SCALE;
}
scale.value = newScale;
})
.onEnd(() => {
savedScale.value = scale.value;
});
const composed = Gesture.Simultaneous(
dragGesture,
Gesture.Simultaneous(zoomGesture)
);
const singleTap = Gesture.Tap().onEnd((_event, success) => {
if (success) {
console.log("singleTap");
}
});
const doubleTap = Gesture.Tap()
.numberOfTaps(2)
.onEnd((_event, success) => {
if (success) {
const { x, y } = _event;
console.log("Double Tap at", x, y);
setBallPosition({ x, y });
}
});
const taps = Gesture.Exclusive(doubleTap, singleTap);
const tapsAndGestures = Gesture.Simultaneous(composed, taps);
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<Animated.View style={{ flex: 1 }}>
<GestureDetector gesture={tapsAndGestures}>
<Animated.Image
source={ges}
style={[{ flex: 1 }, animatedStyle]}
resizeMode="contain"
/>
</GestureDetector>
</Animated.View>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "lightgray",
alignItems: "center",
justifyContent: "center",
},
});
Вылетает приложении при добавление вот этой строчки setBallPosition({ x, y });