fix themes modal, Add English to the trip information tab

components/ui/slice-switch.tsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { ComponentProps } from "react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Animated,
   OpaqueColorValue,
@@ -29,7 +29,7 @@ const PRESS_FEEDBACK_DURATION = 120;
 
 type IoniconName = ComponentProps<typeof Ionicons>["name"];
 
-type RotateSwitchProps = {
+type SliceSwitchProps = {
   size?: SwitchSize;
   leftIcon?: IoniconName;
   leftIconColor?: string | OpaqueColorValue | undefined;
@@ -42,6 +42,7 @@ type RotateSwitchProps = {
   activeOverlayColor?: string;
   style?: StyleProp<ViewStyle>;
   onChange?: (value: boolean) => void;
+  value?: boolean;
 };
 
 const SliceSwitch = ({
@@ -57,19 +58,28 @@ const SliceSwitch = ({
   activeOverlayColor = "#000",
   style,
   onChange,
-}: RotateSwitchProps) => {
+  value,
+}: SliceSwitchProps) => {
   const { width: containerWidth, height: containerHeight } =
     SIZE_PRESETS[size] ?? SIZE_PRESETS.md;
   const animationDuration = Math.max(duration ?? DEFAULT_TOGGLE_DURATION, 0);
-  const [isOn, setIsOn] = useState(false);
-  const [bgOn, setBgOn] = useState(false);
-  const progress = useRef(new Animated.Value(0)).current;
+  const [isOn, setIsOn] = useState(value ?? false);
+  const [bgOn, setBgOn] = useState(value ?? false);
+  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
   const pressScale = useRef(new Animated.Value(1)).current;
-  const overlayTranslateX = useRef(new Animated.Value(0)).current;
+  const overlayTranslateX = useRef(
+    new Animated.Value(value ? containerWidth / 2 : 0)
+  ).current;
   const listenerIdRef = useRef<string | number | null>(null);
 
-  const handleToggle = () => {
-    const next = !isOn;
+  // Sync with external value prop if provided
+  useEffect(() => {
+    if (value !== undefined && value !== isOn) {
+      animateToValue(value);
+    }
+  }, [value]);
+
+  const animateToValue = (next: boolean) => {
     const targetValue = next ? 1 : 0;
     const overlayTarget = next ? containerWidth / 2 : 0;
 
@@ -81,7 +91,6 @@ const SliceSwitch = ({
       overlayTranslateX.setValue(overlayTarget);
       setIsOn(next);
       setBgOn(next);
-      onChange?.(next);
       return;
     }
 
@@ -100,7 +109,6 @@ const SliceSwitch = ({
       }),
     ]).start(() => {
       setBgOn(next);
-      onChange?.(next);
     });
 
     // Remove any previous listener
@@ -132,6 +140,14 @@ const SliceSwitch = ({
     });
   };
 
+  const handleToggle = () => {
+    const next = !isOn;
+    if (value === undefined) {
+      animateToValue(next);
+    }
+    onChange?.(next);
+  };
+
   const handlePressIn = () => {
     pressScale.stopAnimation();
     Animated.timing(pressScale, {