Merge pull request #23857 from huzaifa-99/16204-migrate-switch-to-fun…

…ction-comp Migrated Switch to function component syntax
Expensify · Jul 31, 2023 · 3706f0b · 3706f0b
2 parents b041a2c + c85c33f
commit 3706f0b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 52 deletions.
diff --git a/src/components/Switch.js b/src/components/Switch.js
@@ -1,9 +1,9 @@
-import React, {Component} from 'react';
-import {Animated} from 'react-native';
 import PropTypes from 'prop-types';
-import styles from '../styles/styles';
-import * as Pressables from './Pressable';
+import React, {useEffect, useRef} from 'react';
+import {Animated} from 'react-native';
 import CONST from '../CONST';
+import styles from '../styles/styles';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** Whether the switch is toggled to the on position */
@@ -16,61 +16,41 @@ const propTypes = {
     accessibilityLabel: PropTypes.string.isRequired,
 };
 
-const PressableWithFeedback = Pressables.PressableWithFeedback;
-class Switch extends Component {
-    constructor(props) {
-        super(props);
-        this.offPosition = 0;
-        this.onPosition = 20;
-        this.offsetX = new Animated.Value(props.isOn ? this.onPosition : this.offPosition);
-
-        this.toggleSwitch = this.toggleSwitch.bind(this);
-        this.toggleAction = this.toggleAction.bind(this);
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.isOn === this.props.isOn) {
-            return;
-        }
+const OFFSET_X = {
+    OFF: 0,
+    ON: 20,
+};
 
-        this.toggleSwitch();
-    }
+function Switch(props) {
+    const offsetX = useRef(new Animated.Value(props.isOn ? OFFSET_X.ON : OFFSET_X.OFF));
 
-    // animates the switch to the on or off position
-    toggleSwitch() {
-        Animated.timing(this.offsetX, {
-            toValue: this.props.isOn ? this.onPosition : this.offPosition,
+    useEffect(() => {
+        Animated.timing(offsetX.current, {
+            toValue: props.isOn ? OFFSET_X.ON : OFFSET_X.OFF,
             duration: 300,
             useNativeDriver: true,
         }).start();
-    }
-
-    // executes the callback passed in as a prop
-    toggleAction() {
-        this.props.onToggle(!this.props.isOn);
-    }
-
-    render() {
-        const switchTransform = {transform: [{translateX: this.offsetX}]};
-        return (
-            <PressableWithFeedback
-                style={[styles.switchTrack, !this.props.isOn && styles.switchInactive]}
-                onPress={this.toggleAction}
-                onLongPress={this.toggleAction}
-                accessibilityRole={CONST.ACCESSIBILITY_ROLE.SWITCH}
-                accessibilityState={{checked: this.props.isOn}}
-                aria-checked={this.props.isOn}
-                accessibilityLabel={this.props.accessibilityLabel}
-                // disable hover dim for switch
-                hoverDimmingValue={1}
-                pressDimmingValue={0.8}
-            >
-                <Animated.View style={[styles.switchThumb, switchTransform]} />
-            </PressableWithFeedback>
-        );
-    }
+    }, [props.isOn]);
+
+    return (
+        <PressableWithFeedback
+            style={[styles.switchTrack, !props.isOn && styles.switchInactive]}
+            onPress={() => props.onToggle(!props.isOn)}
+            onLongPress={() => props.onToggle(!props.isOn)}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.SWITCH}
+            accessibilityState={{checked: props.isOn}}
+            aria-checked={props.isOn}
+            accessibilityLabel={props.accessibilityLabel}
+            // disable hover dim for switch
+            hoverDimmingValue={1}
+            pressDimmingValue={0.8}
+        >
+            <Animated.View style={[styles.switchThumb, styles.switchThumbTransformation(offsetX.current)]} />
+        </PressableWithFeedback>
+    );
 }
 
 Switch.propTypes = propTypes;
+Switch.displayName = 'Switch';
 
 export default Switch;
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,