improve step prop

Author: alantoa

README.md

@@ -346,10 +346,17 @@ The `<Slider/>` component has the following configuration properties:
   </tr>
   <tr>
     <td>step</td>
-    <td>number</td>
+    <td>number(integer)</td>
     <td>Step value of the slider. The value should be between 0 and maximumValue - minimumValue)</td>
     <td>❌</td>
     <td>undefined</td>
+  </tr>
+    <tr>
+    <td>steps</td>
+    <td>number(integer)</td>
+    <td>Count of segmented sliders.</td>
+    <td>❌</td>
+    <td>undefined</td>
   </tr>
   <tr>
     <td>snapToStep</td>

example/src/App.tsx

@@ -204,7 +204,7 @@ export default function App() {
                 minimumValue={min10}
                 style={styles.slider}
                 maximumValue={max110}
-                step={10}
+                steps={10}
                 onHapticFeedback={() => {
                   Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
                 }}

src/slide.tsx

@@ -20,10 +20,17 @@ import Animated, {
   withTiming,
   withRepeat,
   withSequence,
+  configureReanimatedLogger,
+  ReanimatedLogLevel,
 } from 'react-native-reanimated';
 import { Bubble, BubbleRef } from './ballon';
 import { palette } from './theme/palette';
 import { clamp } from './utils';
+
+configureReanimatedLogger({
+  level: ReanimatedLogLevel.warn,
+  strict: false,
+});
 const formatSeconds = (second: number) => `${Math.round(second * 100) / 100}`;
 const hitSlop = {
   top: 12,
@@ -185,8 +192,14 @@ export type AwesomeSliderProps = {
    */
   thumbScaleValue?: Animated.SharedValue<number>;
   panHitSlop?: Insets;
-
+  /**
+   * @deprecated use `steps` instead.
+   */
   step?: number;
+  /**
+   * Count of segmented sliders.
+   */
+  steps?: number;
   /**
    * withTiming options when step is defined. if false, no animation will be used. default false.
    */
@@ -217,30 +230,34 @@ export type AwesomeSliderProps = {
    *
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#activeoffsetxvalue-number--number
    */
-  activeOffsetX?: number | number[];
+  activeOffsetX?:
+    | number
+    | [activeOffsetXStart: number, activeOffsetXEnd: number];
   /**
    * Range along Y axis (in points) where fingers travels without activation of
    * gesture. Moving outside of this range implies activation of gesture.
    *
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#activeoffsetyvalue-number--number
    */
-  activeOffsetY?: number | number[];
+  activeOffsetY?:
+    | number
+    | [activeOffsetYStart: number, activeOffsetYEnd: number];
   /**
    * When the finger moves outside this range (in points) along X axis and
    * gesture hasn't yet activated it will fail recognizing the gesture. Range
    * can be given as an array or a single number.
    *
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#failoffsetyvalue-number--number
    */
-  failOffsetX?: number | number[];
+  failOffsetX?: number | [failOffsetXStart: number, failOffsetXEnd: number];
   /**
    * When the finger moves outside this range (in points) along Y axis and
    * gesture hasn't yet activated it will fail recognizing the gesture. Range
    * can be given as an array or a single number
    *
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#failoffsetxvalue-number--number
    */
-  failOffsetY?: number | number[];
+  failOffsetY?: number | [failOffsetYStart: number, failOffsetYEnd: number];
   /**
    * When 'heartbeat' is set to true, the progress bar color will animate back and forth between its current color and the color specified for the heartbeat.
    */
@@ -285,7 +302,8 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
   renderMark,
   setBubbleText,
   sliderHeight = 5,
-  step,
+  step: propsStep,
+  steps,
   stepTimingOptions = false,
   style,
   testID,
@@ -299,6 +317,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
   failOffsetY,
   heartbeat = false,
 }) {
+  const step = propsStep || steps;
   const snappingEnabled = snapToStep && step;
   const bubbleRef = useRef<BubbleRef>(null);
   const isScrubbingInner = useSharedValue(false);
@@ -437,7 +456,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
         },
       ],
     };
-  });
+  }, [bubbleTranslateY, bubbleWidth, width]);
 
   const animatedCacheXStyle = useAnimatedStyle(() => {
     const cacheX =
@@ -448,7 +467,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
     return {
       width: cacheX,
     };
-  });
+  }, [cache, sliderTotalValue, width]);
 
   const animatedHeartbeatStyle = useAnimatedStyle(() => {
     // Goes to one and zero continuously
@@ -469,7 +488,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
       width: sliderWidth,
       opacity,
     };
-  });
+  }, [sliderWidth, heartbeat]);
 
   const onSlideAcitve = useCallback(
     (seconds: number) => {