@towsila/expo-ui-library 1.5.13 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "1.5.13",
+  "version": "1.6.0",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/ui/toggle.tsx

@@ -0,0 +1,94 @@
+import { useRef, useEffect } from "react";
+import { Pressable, Animated, StyleSheet } from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+
+interface ToggleCardProps {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  activeColor?: string;
+  inactiveColor?: string;
+  disabled?: boolean;
+}
+
+const TRACK_WIDTH = 44;
+const TRACK_HEIGHT = 22;
+const THUMB_SIZE = 16;
+const THUMB_PADDING = (TRACK_HEIGHT - THUMB_SIZE) / 2; // keeps thumb centered inside track
+
+export default function ToggleCard({
+  value,
+  onValueChange,
+  activeColor,
+  inactiveColor,
+  disabled = false,
+}: ToggleCardProps) {
+  const { colors } = useAppTheme();
+  const tint = value ? (activeColor ?? colors.semantic.success) : (inactiveColor ?? colors.semantic.border);
+
+  const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(anim, {
+      toValue: value ? 1 : 0,
+      duration: 180,
+      useNativeDriver: false, // animating backgroundColor/left needs JS driver
+    }).start();
+  }, [value]);
+
+  const thumbLeft = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [THUMB_PADDING, TRACK_WIDTH - THUMB_SIZE - THUMB_PADDING],
+  });
+
+
+  return (
+
+      <Pressable
+        onPress={() => !disabled && onValueChange(!value)}
+        disabled={disabled}
+        hitSlop={8}
+      >
+        <Animated.View
+          style={[
+            styles.track,
+            {
+              backgroundColor: colors.background.main,
+              opacity: disabled ? 0.5 : 1,
+            },
+          ]}
+        >
+          <Animated.View
+            style={[
+              styles.thumb,
+              {
+                left: thumbLeft,
+                backgroundColor: tint,
+              },
+            ]}
+          />
+        </Animated.View>
+      </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    width: TRACK_WIDTH,
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    justifyContent: "center",
+  },
+  thumb: {
+    position: "absolute",
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    top: THUMB_PADDING,
+    // subtle shadow so thumb reads as elevated inside the track
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+});