-
-
Notifications
You must be signed in to change notification settings - Fork 980
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Combining Pan Gesture and Swipeable creates unexpected behavior #2862
Comments
Hi @m-bert!
I want to give a haptic feedback to the user, if the |
I see. In that case you can try something like this: const Item = ({ id, title }) => {
const windowWidth = Dimensions.get('window').width;
const threshold = windowWidth / 3;
const hasReachedThreshold = useSharedValue(false);
const panRef = useRef();
const panGesture = Gesture.Pan()
.onUpdate((e) => {
hasReachedThreshold.value = Math.abs(e.translationX) >= threshold;
console.log(hasReachedThreshold.value);
})
.withRef(panRef);
const renderLeftActions = (progress, dragX) => {
return <View style={styles.left} />;
};
const renderRightActions = (progress, dragX) => {
return <View style={styles.right} />;
};
return (
<GestureDetector gesture={panGesture}>
<View>
<Swipeable
key={id}
simultaneousHandlers={panRef}
renderLeftActions={renderLeftActions}
renderRightActions={renderRightActions}
leftThreshold={threshold}
rightThreshold={threshold}>
<View style={styles.item}>
<Text style={styles.text}>{title}</Text>
</View>
</Swipeable>
</View>
</GestureDetector>
);
}; I've made a few changes in your code:
With these changes I was able to achieve what I believe is what you're trying to do. Let me know if it helps! |
It helped a lot. It works perfect now. Thanks a lot. |
Description
I have a GestureDetector with a pan gesture wraped around a Swipeable element. After wrapping the GestureDetector around the Swipeable element, the Swipeable Element does not work as expected. Before it opened or closed after releasing the finger. Now it stucks in the position.
Steps to reproduce
Snack or a link to a repository
https://snack.expo.dev/@bigbart/bugreport-swipeable-list
Gesture Handler version
2.14.0
React Native version
0.73.6
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo managed workflow
Architecture
None
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: