Merge pull request #83 from alantoa/upgrade-to-the-latest-version

upgrade reanimated
alantoa · Oct 30, 2024 · 3a1a83f · 3a1a83f
2 parents f18a3e2 + 0b7083b
commit 3a1a83f
Show file tree

Hide file tree

Showing 6 changed files with 1,554 additions and 395 deletions.
diff --git a/README.md b/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>

diff --git a/example/package.json b/example/package.json
@@ -9,16 +9,16 @@
   },
   "dependencies": {
     "@expo/webpack-config": "~19.0.1",
-    "expo": "^51.0.5",
+    "expo": "^51.0.38",
     "expo-haptics": "~13.0.1",
-    "expo-splash-screen": "~0.27.4",
+    "expo-splash-screen": "~0.27.6",
     "expo-status-bar": "~1.12.1",
     "lottie-react-native": "6.7.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.1",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "3.11.0",
+    "react-native": "0.74.5",
+    "react-native-gesture-handler": "~2.20.0",
+    "react-native-reanimated": "3.16.1",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {

diff --git a/example/src/App.tsx b/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);
                 }}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-awesome-slider",
-  "version": "2.5.3",
+  "version": "2.5.5",
   "description": "Slider component written using Reanimated v2, high performance/fps, also be used for video/audio scrubber.  ",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -65,10 +65,10 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "18.2.0",
-    "react-native": "0.74.1",
+    "react-native": "0.74.5",
     "react-native-builder-bob": "^0.23.2",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "3.11.0",
+    "react-native-gesture-handler": "~2.20.0",
+    "react-native-reanimated": "3.16.1",
     "release-it": "^15.0.0",
     "typescript": "^5.3.3"
   },

diff --git a/src/slide.tsx b/src/slide.tsx
@@ -24,6 +24,7 @@ import Animated, {
 import { Bubble, BubbleRef } from './ballon';
 import { palette } from './theme/palette';
 import { clamp } from './utils';
+
 const formatSeconds = (second: number) => `${Math.round(second * 100) / 100}`;
 const hitSlop = {
   top: 12,
@@ -185,8 +186,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 +224,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 +296,8 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
   renderMark,
   setBubbleText,
   sliderHeight = 5,
-  step,
+  step: propsStep,
+  steps,
   stepTimingOptions = false,
   style,
   testID,
@@ -299,6 +311,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);
@@ -314,9 +327,9 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
     );
     return clamp(index, 0, step);
   }, [
-    maximumValue.value,
-    minimumValue.value,
-    progress.value,
+    maximumValue,
+    minimumValue,
+    progress,
     snappingEnabled,
     step,
   ]);
@@ -399,7 +412,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
         },
       ],
     };
-  }, [progress, minimumValue, maximumValue, width.value]);
+  }, [progress, minimumValue, maximumValue, width]);
 
   const animatedBubbleStyle = useAnimatedStyle(() => {
     let translateX = 0;
@@ -437,7 +450,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
         },
       ],
     };
-  });
+  }, [bubbleTranslateY, bubbleWidth, width]);
 
   const animatedCacheXStyle = useAnimatedStyle(() => {
     const cacheX =
@@ -448,7 +461,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 +482,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
       width: sliderWidth,
       opacity,
     };
-  });
+  }, [sliderWidth, heartbeat]);
 
   const onSlideAcitve = useCallback(
     (seconds: number) => {
@@ -508,14 +521,14 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
       );
     }
   }, [
-    maximumValue.value,
-    minimumValue.value,
-    sliderTotalValue.value,
+    maximumValue,
+    minimumValue,
+    sliderTotalValue,
     step,
-    thumbIndex.value,
-    thumbValue.value,
+    thumbIndex,
+    thumbValue,
     thumbWidth,
-    width.value,
+    width,
     snappingEnabled,
   ]);
   /**
@@ -535,13 +548,13 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
       }
     },
     [
-      markLeftArr.value,
-      sliderTotalValue.value,
+      markLeftArr,
+      sliderTotalValue,
       step,
-      thumbIndex.value,
+      thumbIndex,
       thumbWidth,
-      width.value,
-      minimumValue.value,
+      width,
+      minimumValue,
       snappingEnabled,
     ]
   );
@@ -614,7 +627,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
       isScrubbing,
       isScrubbingInner,
       isTriggedHaptic,
-      markLeftArr.value,
+      markLeftArr,
       onHapticFeedback,
       onSlideAcitve,
       progress,
@@ -623,7 +636,7 @@ export const Slider: FC<AwesomeSliderProps> = memo(function Slider({
       thumbIndex,
       thumbValue,
       thumbWidth,
-      width.value,
+      width,
       xToProgress,
       snappingEnabled,
     ]