update

src/components/Switch.js

@@ -3,48 +3,49 @@ import { Pressable, View } from "react-native";
 import { Easing } from "react-native-reanimated";
 
 import { Palette } from "../styles";
+import { LinearGradient } from "./LinearGradient/LinearGradient";
 
 export default ({ value, setValue, containerStyle = {} }) => {
-  const currentColor = value ? Palette.green : Palette.red;
+  const currentColor = value ? ["#F94697", "#7023F7"] : ["#8C8C8C", "#8C8C8C"];
 
   const switchHeight = 28;
-  const borderWidth = 2;
   const internalMargin = 2;
 
-  const itemSize = switchHeight - borderWidth * 2 - internalMargin * 2;
+  const itemSize = switchHeight - internalMargin * 2;
 
   return (
-    <Pressable
-      onPress={() => setValue(!value)}
-      style={{
-        flexDirection: "row",
-        width: switchHeight * 2,
-        height: switchHeight,
-        borderColor: currentColor,
-        borderWidth: borderWidth,
-        borderRadius: 25,
-        ...containerStyle,
-      }}
-    >
-      <Motion.View
-        animate={{
-          right: value ? 0 : switchHeight,
-          left: value ? switchHeight : 0,
-        }}
-        transition={{
-          type: "timing",
-          duration: 300,
-          easing: Easing.easing,
-        }}
+    <Pressable onPress={() => setValue(!value)}>
+      <LinearGradient
+        colors={currentColor}
         style={{
-          position: "absolute",
-          width: itemSize,
-          height: itemSize,
-          margin: internalMargin,
+          flexDirection: "row",
+          width: switchHeight * 2,
+          height: switchHeight,
           borderRadius: 25,
-          backgroundColor: currentColor,
+          backgroundColor: "red",
+          ...containerStyle,
         }}
-      />
+      >
+        <Motion.View
+          animate={{
+            right: value ? 0 : switchHeight,
+            left: value ? switchHeight : 0,
+          }}
+          transition={{
+            type: "timing",
+            duration: 300,
+            easing: Easing.easing,
+          }}
+          style={{
+            position: "absolute",
+            width: itemSize,
+            height: itemSize,
+            margin: internalMargin,
+            borderRadius: 25,
+            backgroundColor: Palette.white,
+          }}
+        />
+      </LinearGradient>
     </Pressable>
   );
 };