Skip to content

[Slider] Fix Android hitSlop by replacing touchArea overlay with responder system #3951

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.

Sign up for GitHub

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

Open
adids1221 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[Slider] Fix Android hitSlop by replacing touchArea overlay with responder system #3951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb72d9a
fix: remove touchArea overlay to fix Android thumb hitSlop
adids1221 Mar 15, 2026
c237fc5
fix: add hitSlop to Incubator.Slider gesture for Android thumb drag
adids1221 Mar 23, 2026
ec8d4fb
Merge branch 'master' into fix/slider_android_hitslop_container_gesture
adids1221 Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/react-native-ui-lib/jestSetup/jest-setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ jest.mock('react-native-gesture-handler',
PanMock.onFinalize = getDefaultMockedHandler('onFinalize');
PanMock.activateAfterLongPress = getDefaultMockedHandler('activateAfterLongPress');
PanMock.enabled = getDefaultMockedHandler('enabled');
PanMock.hitSlop = getDefaultMockedHandler('hitSlop');
PanMock.onTouchesMove = getDefaultMockedHandler('onTouchesMove');
PanMock.prepare = jest.fn();
PanMock.initialize = jest.fn();
Expand Down
11 changes: 6 additions & 5 deletions packages/react-native-ui-lib/src/components/slider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,10 @@ class Slider extends PureComponent<InternalSliderProps, State> {
this.handleMeasure('thumbSize', nativeEvent);
};

handleContainerShouldSetResponder = () => {
return !this.props.disabled;
};

handleTrackPress = (event: GestureResponderEvent) => {
if (this.props.disabled) {
return;
Expand Down Expand Up @@ -672,10 +676,11 @@ class Slider extends PureComponent<InternalSliderProps, State> {
onLayout={this.onContainerLayout}
onAccessibilityAction={this.onAccessibilityAction}
testID={testID}
onStartShouldSetResponder={this.handleContainerShouldSetResponder}
onResponderRelease={this.handleTrackPress}
{...this.getAccessibilityProps()}
>
{this.renderTrack()}
<View style={styles.touchArea} onTouchEnd={this.handleTrackPress}/>
{this.renderRangeThumb()}
{this.renderThumb()}
</View>
Expand All @@ -700,9 +705,5 @@ const styles = StyleSheet.create({
},
trackDisableRTL: {
right: 0
},
touchArea: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'transparent'
}
});
1 change: 1 addition & 0 deletions packages/react-native-ui-lib/src/incubator/slider/Thumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const Thumb = (props: ThumbProps) => {
const lastOffset = useSharedValue(0);

const gesture = Gesture.Pan()
.hitSlop(hitSlop ?? DEFAULT_THUMB_HIT_SLOP)
Copy link
Copy Markdown
Collaborator

@M-i-k-e-l M-i-k-e-l Mar 31, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You already have the default in the destructor

Suggested change
.hitSlop(hitSlop ?? DEFAULT_THUMB_HIT_SLOP)
.hitSlop(hitSlop)

I think this (modified) change along with changing the internal implementation from Slider to Incubator.Slider is enough (I think we've discussed testing the incubator version).
I've tested it on my device and it works, with that said I would not HF it and make sure it's fully tested (and also - please test on iOS)

Copy link
Copy Markdown
Collaborator

@M-i-k-e-l M-i-k-e-l Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you do agree then also edit the description and changelog.
Either way please remove "React Native Gesture Responder System docs"

Copy link
Copy Markdown
Collaborator

@M-i-k-e-l M-i-k-e-l Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the private screen - it seems that the video is no longer available, you can use a link from here IMO

.onBegin(() => {
onSeekStart?.();
isPressed.value = true;
Expand Down
Loading