Themed Switch Initialization

components/molecules/ThemedSwitch.js

@@ -0,0 +1,99 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import CustomSwitch from './CustomSwitch'
+import colors from '../../theme/colors'
+import { interpolateColor, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+
+const ThemedSwitch = ({ value = true, onValueChange, theme }) => {
+    let style = {}
+    let toggleOnColor = colors.white
+    let toggleOffColor = colors.white
+    const shareValue = useSharedValue(value ? 1 : 0)
+    const InterpolateXInput = [0, 1];
+
+    switch (theme) {
+        case 'secondary':
+
+            toggleOffColor = colors.primaryColor
+            toggleOnColor = colors.white
+            style = {
+                containerStyle: {
+                    // borderColor: colors.primaryColor,
+                    borderColor: interpolateColor(shareValue.value, InterpolateXInput, [
+                        toggleOffColor,
+                        toggleOnColor,
+                    ]),
+                    borderWidth: 2,
+                    backgroundColor: interpolateColor(shareValue.value, InterpolateXInput.reverse(), [
+                        toggleOffColor,
+                        toggleOnColor,
+                    ]),
+
+                }
+            }
+
+
+            break;
+        case 'primary':
+        default:
+
+            toggleOffColor = colors.primaryColor
+            toggleOnColor = colors.white
+            style = {
+                containerStyle: {
+                    // borderColor: colors.primaryColor,
+                    borderColor: interpolateColor(shareValue.value, InterpolateXInput.reverse(), [
+                        toggleOffColor,
+                        toggleOnColor,
+                    ]),
+                    borderWidth: 2,
+                    backgroundColor: interpolateColor(shareValue.value, InterpolateXInput.reverse(), [
+                        toggleOffColor,
+                        toggleOnColor,
+                    ]),
+
+                }
+            }
+
+
+            break;
+
+    }
+
+
+    const containerAnimatedStyle = useAnimatedStyle(() => style)
+
+    // {
+    //     return {
+    //       transform: [
+    //         {
+    //           translateX: interpolate(
+    //             shareValue.value,
+    //             InterpolateXInput,
+    //             [0, BUTTON_WIDTH - SWITCH_BUTTON_AREA - 2 * SWITCH_BUTTON_PADDING],
+    //             Extrapolate.CLAMP,
+    //           ),
+    //         },
+    //       ],
+    //       backgroundColor: interpolateColor(shareValue.value, InterpolateXInput, [
+    //         toggleOffColor,
+    //         toggleOnColor,
+    //       ]),
+    //     };
+    //   });
+    return (
+        <CustomSwitch
+            onChange={onValueChange}
+            value={value}
+            containerStyle={containerAnimatedStyle}
+            toggleOffColor={toggleOffColor}
+            toggleOnColor={toggleOnColor}
+            height={22}
+            width={40}
+        />
+    )
+}
+
+export default ThemedSwitch
+
+const styles = StyleSheet.create({})