Incubator slider - fix overlapping thumbs (#2502)

* IncubatorSlider - fix thums overlapping

* change isPressDefault to isPressed

* useGap - fix by adding 'secondary' prop to identify the range thumb

* useGap - move to 'true' to align with old implementation

Author: Inbal-Tish

demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -6,9 +6,9 @@ import {renderBooleanOption} from '../ExampleScreenPresenter';
 const VALUE = 20;
 const NEGATIVE_VALUE = -30;
 const MIN = 0;
-const MAX = 100;
-const INITIAL_MIN = 10;
-const INITIAL_MAX = 70;
+const MAX = Constants.screenWidth - 40; // horizontal margins 20
+const INITIAL_MIN = 30;
+const INITIAL_MAX = 270;
 
 const IncubatorSliderScreen = () => {
   const [disableRTL, setDisableRTL] = useState<boolean>(false);
@@ -161,7 +161,6 @@ const IncubatorSliderScreen = () => {
           <Incubator.Slider
             ref={rangeSlider}
             useRange
-            useGap
             onRangeChange={onRangeChange}
             minimumValue={MIN}
             maximumValue={MAX}

src/incubator/Slider/Thumb.tsx

@@ -23,6 +23,7 @@ export interface Props extends ViewProps {
   shouldBounceToStep: boolean;
   stepInterpolatedValue: SharedValue<number>;
   gap?: number;
+  secondary?: boolean;
 }
 
 const SHADOW_RADIUS = 4;
@@ -43,17 +44,18 @@ const Thumb = (props: Props) => {
     shouldDisableRTL,
     shouldBounceToStep,
     stepInterpolatedValue,
-    gap = 0
+    gap = 0,
+    secondary
   } = props;
 
   const rtlFix = Constants.isRTL ? -1 : 1;
-  const isPressedDefault = useSharedValue(false);
+  const isPressed = useSharedValue(false);
   const thumbSize = useSharedValue({width: THUMB_SIZE, height: THUMB_SIZE});
   const lastOffset = useSharedValue(0);
 
   const gesture = Gesture.Pan()
     .onBegin(() => {
-      isPressedDefault.value = true;
+      isPressed.value = true;
       lastOffset.value = offset.value;
     })
     .onUpdate(e => {
@@ -67,28 +69,30 @@ const Thumb = (props: Props) => {
         // adjust end edge
         newX = end.value;
       }
-      if (newX < end.value - gap && newX > start.value + gap) {
+      if (!secondary && newX < gap || 
+        secondary && newX > end.value - gap || 
+        newX < end.value - gap && newX > start.value + gap) {
         offset.value = newX;
       }
     })
     .onEnd(() => {
       onSeekEnd?.();
     })
     .onFinalize(() => {
-      isPressedDefault.value = false;
+      isPressed.value = false;
       if (shouldBounceToStep) {
         offset.value = Math.round(offset.value / stepInterpolatedValue.value) * stepInterpolatedValue.value;
       }
     });
   gesture.enabled(!disabled);
 
   const animatedStyle = useAnimatedStyle(() => {
-    const customStyle = isPressedDefault.value ? activeStyle?.value : defaultStyle?.value;
+    const customStyle = isPressed.value ? activeStyle?.value : defaultStyle?.value;
     return {
       ...customStyle,
       transform: [
         {translateX: (offset.value - thumbSize.value.width / 2) * rtlFix},
-        {scale: withSpring(!disableActiveStyling && isPressedDefault.value ? 1.3 : 1)}
+        {scale: withSpring(!disableActiveStyling && isPressed.value ? 1.3 : 1)}
       ]
     };
   });

src/incubator/Slider/index.tsx

@@ -59,7 +59,7 @@ const Slider = React.memo((props: Props) => {
     thumbHitSlop,
     disableActiveStyling,
     disabled,
-    useGap,
+    useGap = true,
     accessible,
     testID
   } = props;
@@ -214,7 +214,7 @@ const Slider = React.memo((props: Props) => {
     if (useRange) {
       return {
         transform: [{translateX: withTiming(defaultThumbOffset.value * rtlFix, {duration: 10})}],
-        width: withTiming(rangeThumbOffset.value - defaultThumbOffset.value, {duration: 10})
+        width: withTiming(Math.abs(rangeThumbOffset.value - defaultThumbOffset.value), {duration: 10})
       };
     } else {
       return {
@@ -232,6 +232,7 @@ const Slider = React.memo((props: Props) => {
         end={type === ThumbType.DEFAULT ? rangeThumbOffset : end}
         offset={type === ThumbType.DEFAULT ? defaultThumbOffset : rangeThumbOffset}
         gap={rangeGap}
+        secondary={type !== ThumbType.DEFAULT}
         onSeekStart={onSeekStart}
         onSeekEnd={onSeekEnd}
         shouldDisableRTL={shouldDisableRTL}