Skip to content

[Incubator.Slider] Fix Android hitSlop on thumb#3967

Merged
adids1221 merged 2 commits intomasterfrom
fix/incubator-slider-android-hitslop
Apr 9, 2026
Merged

[Incubator.Slider] Fix Android hitSlop on thumb#3967
adids1221 merged 2 commits intomasterfrom
fix/incubator-slider-android-hitslop

Conversation

@adids1221
Copy link
Copy Markdown
Contributor

@adids1221 adids1221 commented Apr 9, 2026

Description

Fixes an Android bug where touches near the Incubator.Slider thumb fail to start a drag.

Added .hitSlop() to the RNGH Gesture.Pan() on the thumb, so the gesture handler natively recognizes touches in the expanded hit area on Android.
hitSlop now works consistently on both platforms.

Changelog

Incubator.Slider - Fixed Android bug where touches near the thumb failed to start a drag.

Additional info

  • MADS-4866

Added .hitSlop() to the RNGH Gesture.Pan() on the thumb so the gesture
handler natively recognizes touches in the expanded hit area on Android.
Also added hitSlop to the Pan gesture mock in jest setup.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 9, 2026

✅ PR Description Validation Passed

All required sections are properly filled out:

  • Description
  • Changelog
  • Additional info

Your PR is good for review! 🚀


This validation ensures all sections from the PR template are properly filled.

@adids1221
Copy link
Copy Markdown
Contributor Author

How to reproduce

Drop this into PlaygroundScreen.tsx and test on Android:

import React, {useState} from 'react';
import {Platform} from 'react-native';
import {View, Text, Switch, Incubator} from 'react-native-ui-lib';

const TAG = `[Slider-${Platform.OS}]`;

export default function PlaygroundScreen() {
  const [disabled, setDisabled] = useState(false);

  return (
    <View flex padding-20>
      <Text text60 marginB-20>
        Slider Debug ({Platform.OS})
      </Text>

      <View row centerV marginB-20>
        <Text text70 marginR-10>
          Disabled
        </Text>
        <Switch value={disabled} onValueChange={setDisabled}/>
      </View>

      <Text text70 marginT-40 marginB-10>
        Incubator.Slider
      </Text>
      <View
        style={{width: '100%', height: 60, justifyContent: 'center'}}
        onTouchStart={() => console.log(`${TAG} - PARENT onTouchStart (Incubator)`)}
        onTouchEnd={() => console.log(`${TAG} - PARENT onTouchEnd (Incubator)`)}
      >
        <Incubator.Slider
          value={30}
          minimumValue={0}
          maximumValue={100}
          disabled={disabled}
          onSeekStart={() => console.log(`${TAG} - Incubator.Slider - onSeekStart`)}
          onSeekEnd={() => console.log(`${TAG} - Incubator.Slider - onSeekEnd`)}
          onValueChange={(v: number) => console.log(`${TAG} - Incubator.Slider - onValueChange: ${v.toFixed(1)}`)}
        />
      </View>
    </View>
  );
}

What to test

  • Android — main fix: Touch near the thumb (not exactly on it) and drag → should start dragging immediately
  • Both platforms — track tap: Tap anywhere on the track away from the thumb → value should jump to that position
  • Both platforms — normal drag: Grab the thumb and drag → should work smoothly

@M-i-k-e-l M-i-k-e-l assigned adids1221 and unassigned M-i-k-e-l Apr 9, 2026
@adids1221
Copy link
Copy Markdown
Contributor Author

Replace #3951

@adids1221 adids1221 merged commit d26946f into master Apr 9, 2026
3 checks passed
@adids1221 adids1221 deleted the fix/incubator-slider-android-hitslop branch April 9, 2026 11:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants