-
-
Notifications
You must be signed in to change notification settings - Fork 978
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
Set cursor to the grabbing hand when gesture is active #700
Comments
Added in 2.6.1 😎 Note that this change is available in new web implementation. To enable it, call |
Why is this desirable? I just encountered the behavior and I don't want it, and not seeing a way to turn it off. |
@TomSwift I agree, and I've come up with a workaround to turn it off:
For example: const viewRef = useRef<Animated.View>(null);
/* ... */
const panGesture = Gesture.Pan()
.onBegin(() => {
// Web fix: don't use the grabby hand when drawing.
if (Platform.OS === 'web' && viewRef.current !== null) {
(viewRef.current as unknown as HTMLElement).style.cursor = 'auto';
}
})
/* ...more config */;
/* ... */
<GestureDetector gesture={panGesture}>
<Animated.View ref={viewRef} /* ...more props */> This works because they set the cursor to Edit: hrm, actually I'm not sure if that's enough. I actually was doing something a bit more complicated: const panGesture = Gesture.Exclusive(
Gesture.Pan()
.onBegin(() => {
// Web fix: don't use the grabby hand when drawing.
if (Platform.OS === 'web' && viewRef.current !== null) {
(viewRef.current as unknown as HTMLElement).style.cursor = 'auto';
}
})
.minDistance(0)
/* ...more config */,
Gesture.Tap()
.onBegin(() => {
// Web fix: don't use the grabby hand when drawing.
if (Platform.OS === 'web' && viewRef.current !== null) {
(viewRef.current as unknown as HTMLElement).style.cursor = 'auto';
}
})
); This works. I seem to need the Edit 2: It appears that adding in the extra (unused) let panGesture: GestureType | ComposedGesture = Gesture.Pan()
.onUpdate(event => {
// Web fix: don't use grabby hand (part 1)
if (Platform.OS === 'web' && viewRef.current !== null) {
(viewRef.current as unknown as HTMLElement).style.cursor = 'auto';
}
/* ...more code */
})
/* ...more config */;
// Web fix: don't use grabby hand (part 2)
if (Platform.OS === 'web') {
panGesture = Gesture.Exclusive(
panGesture,
Gesture.Tap().onBegin(() => {
if (viewRef.current !== null) (viewRef.current as unknown as HTMLElement).style.cursor = 'auto';
})
);
} Edit 3: If you are using manual activation, it's super simple: just put this code immediately after calling const gesture = Gesture.Manual()
.onTouchesDown((event, manager) => {
/* ... logic */
manager.activate();
if (viewRef.current !== null) (viewRef.current as unknown as HTMLElement).style.cursor = 'auto';
}; All the hacks in the rest of my comment are to do with trying to find where each gesture calls |
Hi @TomSwift and @chriscoomber! We understand that this change may not be desirable and not everyone likes the idea. With that in mind I've prepared this PR, which adds |
## Description This PR adds `activeCursor` prop which allows users to change cursor appearance upon handler activation. Initially it was added in [2.6.1](https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.6.1) as a response to [this issue](#700). However, not everyone liked the idea (which is understandable), so we decided to turn this change into property. This way anyone who was using it still will be able to do so, and those who didn't like the change don't have to remove it on their own. Co-authored-by: Michał Bert <michal.bert@swmansion.com>
😎
The text was updated successfully, but these errors were encountered: