Use style function for switch thumb transform style

Expensify · Jul 30, 2023 · c85c33f · c85c33f
1 parent 6c7b2c4
commit c85c33f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/Switch.js b/src/components/Switch.js
@@ -23,7 +23,6 @@ const OFFSET_X = {
 
 function Switch(props) {
     const offsetX = useRef(new Animated.Value(props.isOn ? OFFSET_X.ON : OFFSET_X.OFF));
-    const switchTransformStyle = {transform: [{translateX: offsetX.current}]};
 
     useEffect(() => {
         Animated.timing(offsetX.current, {
@@ -46,7 +45,7 @@ function Switch(props) {
             hoverDimmingValue={1}
             pressDimmingValue={0.8}
         >
-            <Animated.View style={[styles.switchThumb, switchTransformStyle]} />
+            <Animated.View style={[styles.switchThumb, styles.switchThumbTransformation(offsetX.current)]} />
         </PressableWithFeedback>
     );
 }

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2504,6 +2504,10 @@ const styles = {
         backgroundColor: themeColors.appBG,
     },
 
+    switchThumbTransformation: (translateX) => ({
+        transform: [{translateX}],
+    }),
+
     radioButtonContainer: {
         backgroundColor: themeColors.componentBG,
         borderRadius: 10,