Bug Description
1. Summary
GestureDetector does not follow the Animated.View when transform translate is used
App Name:
App Link on Amazon Appstore (found through Developer Console → Actions column in App List → View on Amazon.com):
Bug Severity
Select one that applies
- Impacts operation of app
- Blocks current development
- Improvement suggestion
- Issue with documentation (If selected, please share the doc link and describe the issue)
- Other
2. Steps to Reproduce
- Create vega app from snack GestureDetectorRepro - Snack
- Click on the blue square and drag it to the right. Square turns yellow while dragged.
- Click on the blue square again when it is outside of red square.
3. Observed Behavior
Explain what actually happened, noting any discrepancies or malfunctions.
On step (3) the square does not turn yellow, I'm unable to move it.
When clicking inside the red square, the blue square becomes yellow
4. Expected Behavior
Describe what you expected the SDK to do under normal operation.
When I open the snack on the web / android / ios
I'm able to click on the blue square and start moving it even when it is outside the red square.
4.a Possible Root Cause & Temporary Workaround
Fill out anything you have tried. If you don’t know, N/A is acceptable
When I replaced transforms with position absolute + left prop for offset the pan gesture works fine, and I'm able to click on the blue square and move it. My guess is that something is wrong with gestures when transforms are applied
5. Logs or crash report
N/A
6. Environment
-
Active SDK Version: 0.22.6759 Vega CLI Version: 1.2.22NAME="OS" OE_VERSION="4.0.0" OS_MAJOR_VERSION="1" OS_MINOR_VERSION="1" RELEASE_ID="14" OS_VERSION="1.1" BRANCH_CODE="TV Ship day60" BUILD_DESC="OS 1.1 (TV Ship day60/10675730)" BUILD_FINGERPRINT="1.0.67573.0(9a1d8dfa7da5d600)/10675730N:user/dev-keys" BUILD_VARIANT="user" BUILD_TAGS="dev-keys" BUILD_DATE="Fri Feb 13 11:51:33 UTC 2026" BUILD_TIMESTAMP="1770983493" VERSION_NUMBER="1402077573030"
7. Example Code Snippet / Screenshots / Screengrabs
I was able to reproduce the issue with this code
import { View, StyleSheet } from 'react-native';
import { GestureDetector, Gesture } from '@amazon-devices/react-native-gesture-handler';
import Animated from '@amazon-devices/react-native-reanimated';
import { useSharedValue, useAnimatedStyle, withSpring } from '@amazon-devices/react-native-reanimated';
import { GestureHandlerRootView } from '@amazon-devices/react-native-gesture-handler';
export const Repro = () => {
const isPressed = useSharedValue(false);
const offset = useSharedValue({ x: 0});
const start = useSharedValue({x: 0})
const gesture = Gesture.Pan()
.onBegin(() => {
isPressed.value = true;
})
.onUpdate((e) => {
offset.value = {
x: e.translationX + start.value.x,
}
})
.onEnd(() => {
start.value = {
x: offset.value.x,
}
})
.onFinalize(() => {
isPressed.value = false;
})
const animatedStyles = useAnimatedStyle(() => {
return {
transform: [
{ translateX: offset.value.x },
{ scale: withSpring(isPressed.value ? 1.2 : 1) },
],
backgroundColor: isPressed.value ? 'yellow' : 'blue',
};
});
return (
<GestureHandlerRootView>
<View style={styles.container}>
<View style={styles.border}>
<GestureDetector gesture={gesture}>
<Animated.View style={[styles.dot, animatedStyles]}></Animated.View>
</GestureDetector>
</View>
</View>
</GestureHandlerRootView>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'black',
opacity: 0.5,
justifyContent: 'center',
padding: 20,
},
dot: {
backgroundColor: 'red',
width: 200,
height: 200,
borderRadius: 50
},
border: {
width: 200,
height: 200,
borderWidth: 5,
borderColor: 'red'
}
})
