From f986cfbe14c8b2febe6d59d8b256b859ff8c71e4 Mon Sep 17 00:00:00 2001
From: Eeshan Keni <19875557+eeshankeni@users.noreply.github.com>
Date: Thu, 16 Mar 2023 12:51:24 +0530
Subject: [PATCH] migrate from v1 to v3 reanimated api

since reanimated v1 api is deprecated, this package no longer works and needs to be updated. Shared values and animatedStyles hook used now to handle anmiations.
---
 package.json        |  3 +++
 src/Switch/index.js | 53 +++++++++++++++++++++++++++------------------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 8d03752..430c1dc 100644
--- a/package.json
+++ b/package.json
@@ -38,5 +38,8 @@
   "devDependencies": {
     "metro-react-native-babel-preset": "^0.60.0",
     "standard-version": "^9.0.0"
+  },
+  "dependencies": {
+    "react-native-reanimated": "^3.0.2"
   }
 }
diff --git a/src/Switch/index.js b/src/Switch/index.js
index 8d39a46..180351f 100644
--- a/src/Switch/index.js
+++ b/src/Switch/index.js
@@ -1,7 +1,12 @@
 import PropTypes from "prop-types";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import { Pressable, StyleSheet } from "react-native";
-import Animated, { interpolateColors, spring } from "react-native-reanimated";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  interpolateColor,
+} from "react-native-reanimated";
 
 const RNSwitch = ({
   handleOnPress,
@@ -10,38 +15,43 @@ const RNSwitch = ({
   thumbColor,
   value,
 }) => {
-  const [switchTranslate] = useState(new Animated.Value(0));
+
+  const switchTranslate = useSharedValue(0);
+
   useEffect(() => {
     if (value) {
-      spring(switchTranslate, {
-        toValue: 21,
+      switchTranslate.value = withSpring(21, {
         mass: 1,
         damping: 15,
         stiffness: 120,
         overshootClamping: false,
         restSpeedThreshold: 0.001,
         restDisplacementThreshold: 0.001,
-      }).start();
+      });
     } else {
-      spring(switchTranslate, {
-        toValue: 0,
+      switchTranslate.value = withSpring(0, {
         mass: 1,
         damping: 15,
         stiffness: 120,
         overshootClamping: false,
         restSpeedThreshold: 0.001,
         restDisplacementThreshold: 0.001,
-      }).start();
+      });
     }
   }, [value, switchTranslate]);
-  const interpolateBackgroundColor = {
-    backgroundColor: interpolateColors(switchTranslate, {
-      inputRange: [0, 22],
-      outputColorRange: [inActiveTrackColor, activeTrackColor],
-    }),
-  };
-  const memoizedOnSwitchPressCallback = React.useCallback(() => {
-    handleOnPress(!value);
+
+  const interpolateBackgroundColor = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        switchTranslate.value,
+        [0, 22],
+        [inActiveTrackColor, activeTrackColor]
+      ),
+    };
+  });
+
+  const memoizedOnSwitchPressCallback = useMemo(() => {
+    return () => handleOnPress(!value);
   }, [handleOnPress, value]);
 
   return (
@@ -66,7 +76,8 @@ const RNSwitch = ({
       </Animated.View>
     </Pressable>
   );
-};
+}
+
 
 const styles = StyleSheet.create({
   circleStyle: {
@@ -93,7 +104,7 @@ const styles = StyleSheet.create({
   },
 });
 
-RNSwitch.propTypes = {
+RNswitch.propTypes = {
   handleOnPress: PropTypes.func.isRequired,
   value: PropTypes.bool.isRequired,
   activeTrackColor: PropTypes.string,
@@ -101,10 +112,10 @@ RNSwitch.propTypes = {
   thumbColor: PropTypes.string,
 };
 
-RNSwitch.defaultProps = {
+RNswitch.defaultProps = {
   activeTrackColor: "#007AFF",
   inActiveTrackColor: "#F2F5F7",
   thumbColor: "#FFF",
 };
 
-export default RNSwitch;
+export default RNswitch;