From d213a2cb46958e6332b3a5d4bdfcf0175abfeb17 Mon Sep 17 00:00:00 2001
From: Frank Calise <fcalise@gmail.com>
Date: Mon, 19 Feb 2024 10:09:35 -0500
Subject: [PATCH 1/3] fix(components): switch animation slide on web

---
 boilerplate/app/components/Toggle.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/boilerplate/app/components/Toggle.tsx b/boilerplate/app/components/Toggle.tsx
index 7fb1b47ac..a3a1b7c5e 100644
--- a/boilerplate/app/components/Toggle.tsx
+++ b/boilerplate/app/components/Toggle.tsx
@@ -13,10 +13,16 @@ import {
   ViewProps,
   ViewStyle,
 } from "react-native"
-import Animated, { useAnimatedStyle, withTiming } from "react-native-reanimated"
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated"
 import { colors, spacing } from "../theme"
 import { iconRegistry, IconTypes } from "./Icon"
 import { Text, TextProps } from "./Text"
+import { isRTL } from "app/i18n"
 
 type Variants = "checkbox" | "switch" | "radio"
 
@@ -450,10 +456,14 @@ function Switch(props: ToggleInputProps) {
       $switchInner?.paddingRight ||
       0) as number
 
-    const start = withTiming(on ? "100%" : "0%")
-    const marginStart = withTiming(on ? -(knobWidth || 0) - offsetRight : 0 + offsetLeft)
+    const translateX = interpolate(
+      on ? 1 : 0,
+      isRTL ? [1, 0] : [0, 1],
+      [0 + offsetLeft, +(knobWidth || 0) + offsetRight],
+      Extrapolation.CLAMP,
+    )
 
-    return { start, marginStart }
+    return { transform: [{ translateX: withTiming(translateX) }] }
   }, [on, knobWidth])
 
   return (

From 7c9c9f0bfe66ec344c338761c74dc188a6954c15 Mon Sep 17 00:00:00 2001
From: Frank Calise <fcalise@gmail.com>
Date: Mon, 19 Feb 2024 10:21:27 -0500
Subject: [PATCH 2/3] fix(toggle): RTL support

---
 boilerplate/app/components/Toggle.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/boilerplate/app/components/Toggle.tsx b/boilerplate/app/components/Toggle.tsx
index a3a1b7c5e..67ae84fbf 100644
--- a/boilerplate/app/components/Toggle.tsx
+++ b/boilerplate/app/components/Toggle.tsx
@@ -456,10 +456,12 @@ function Switch(props: ToggleInputProps) {
       $switchInner?.paddingRight ||
       0) as number
 
+    const rtlAdjustment = isRTL ? -1 : 1
+
     const translateX = interpolate(
       on ? 1 : 0,
-      isRTL ? [1, 0] : [0, 1],
-      [0 + offsetLeft, +(knobWidth || 0) + offsetRight],
+      [0, 1],
+      [rtlAdjustment * offsetLeft, rtlAdjustment * (+(knobWidth || 0) + offsetRight)],
       Extrapolation.CLAMP,
     )
 

From 7b7e4525b8edd4a61d98a16950bd0c3e6b6404a7 Mon Sep 17 00:00:00 2001
From: Frank Calise <fcalise@gmail.com>
Date: Wed, 21 Feb 2024 10:56:23 -0500
Subject: [PATCH 3/3] fix(toggle): better RTL support

---
 boilerplate/app/components/Toggle.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/boilerplate/app/components/Toggle.tsx b/boilerplate/app/components/Toggle.tsx
index 67ae84fbf..93bc3d722 100644
--- a/boilerplate/app/components/Toggle.tsx
+++ b/boilerplate/app/components/Toggle.tsx
@@ -3,6 +3,7 @@ import {
   GestureResponderEvent,
   Image,
   ImageStyle,
+  Platform,
   StyleProp,
   SwitchProps,
   TextInputProps,
@@ -456,14 +457,17 @@ function Switch(props: ToggleInputProps) {
       $switchInner?.paddingRight ||
       0) as number
 
+    // For RTL support:
+    // - web flip input range to [1,0]
+    // - outputRange doesn't want rtlAdjustment
     const rtlAdjustment = isRTL ? -1 : 1
+    const inputRange = Platform.OS === "web" ? (isRTL ? [1, 0] : [0, 1]) : [0, 1]
+    const outputRange =
+      Platform.OS === "web"
+        ? [offsetLeft, +(knobWidth || 0) + offsetRight]
+        : [rtlAdjustment * offsetLeft, rtlAdjustment * (+(knobWidth || 0) + offsetRight)]
 
-    const translateX = interpolate(
-      on ? 1 : 0,
-      [0, 1],
-      [rtlAdjustment * offsetLeft, rtlAdjustment * (+(knobWidth || 0) + offsetRight)],
-      Extrapolation.CLAMP,
-    )
+    const translateX = interpolate(on ? 1 : 0, inputRange, outputRange, Extrapolation.CLAMP)
 
     return { transform: [{ translateX: withTiming(translateX) }] }
   }, [on, knobWidth])