From 1224e3e411f9f11820e6f70b0d23d5614d33fbc8 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Sat, 29 Jul 2023 18:06:05 +0500 Subject: [PATCH 1/8] Migrated Switch to function component syntax --- src/components/Switch.js | 83 +++++++++++++++------------------------- 1 file changed, 31 insertions(+), 52 deletions(-) diff --git a/src/components/Switch.js b/src/components/Switch.js index 608471763e29..4a243e41b746 100644 --- 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, useState } 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,59 +16,38 @@ 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] = useState(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, { + 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 ( - - - - ); - } + }, [props.isOn]); + + return ( + 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} + > + + + ); } Switch.propTypes = propTypes; From 67456a202378f741f18bfc19f5e0c09eb1a47e52 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Sat, 29 Jul 2023 18:22:04 +0500 Subject: [PATCH 2/8] Use ref instead of state for switch offset --- src/components/Switch.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Switch.js b/src/components/Switch.js index 4a243e41b746..0a18f06dda43 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import React, { useEffect, useState } from 'react'; -import { Animated } from 'react-native'; +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'; @@ -22,7 +22,7 @@ const OFFSET_X = { }; function Switch(props) { - const [offsetX] = useState(new Animated.Value(props.isOn ? OFFSET_X.ON : OFFSET_X.OFF)); + const offsetX = useRef(new Animated.Value(props.isOn ? OFFSET_X.ON : OFFSET_X.OFF)).current; useEffect(() => { Animated.timing(offsetX, { @@ -38,14 +38,14 @@ function Switch(props) { onPress={() => props.onToggle(!props.isOn)} onLongPress={() => props.onToggle(!props.isOn)} accessibilityRole={CONST.ACCESSIBILITY_ROLE.SWITCH} - accessibilityState={{ checked: props.isOn }} + accessibilityState={{checked: props.isOn}} aria-checked={props.isOn} accessibilityLabel={props.accessibilityLabel} // disable hover dim for switch hoverDimmingValue={1} pressDimmingValue={0.8} > - + ); } From f4182c25c96e270d34d3d219c81cb0ab062b3e02 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Sat, 29 Jul 2023 18:30:29 +0500 Subject: [PATCH 3/8] Fix lint --- src/components/Switch.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Switch.js b/src/components/Switch.js index 0a18f06dda43..babdb6a4b193 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -30,6 +30,7 @@ function Switch(props) { duration: 300, useNativeDriver: true, }).start(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.isOn]); return ( From eb514560bf679f7caac91b771bbac150e18862ee Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Sun, 30 Jul 2023 20:28:03 +0500 Subject: [PATCH 4/8] Added display name to switch --- src/components/Switch.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Switch.js b/src/components/Switch.js index babdb6a4b193..be279518e563 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -52,5 +52,6 @@ function Switch(props) { } Switch.propTypes = propTypes; +Switch.displayName = 'Switch'; export default Switch; From 866c53a998bdfc3789dcbc872b3b43ce07c1344a Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Sun, 30 Jul 2023 20:40:55 +0500 Subject: [PATCH 5/8] Use functional style syntax for switch transform style --- src/components/Switch.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Switch.js b/src/components/Switch.js index be279518e563..149da07b8392 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -23,6 +23,7 @@ const OFFSET_X = { function Switch(props) { const offsetX = useRef(new Animated.Value(props.isOn ? OFFSET_X.ON : OFFSET_X.OFF)).current; + const switchTransformStyle = {transform: [{translateX: offsetX}]} useEffect(() => { Animated.timing(offsetX, { @@ -46,7 +47,7 @@ function Switch(props) { hoverDimmingValue={1} pressDimmingValue={0.8} > - + ); } From 461ccda635932824738d1b626512eb10ef6d889e Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Sun, 30 Jul 2023 20:56:51 +0500 Subject: [PATCH 6/8] Updated ref current value usage in switch --- src/components/Switch.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Switch.js b/src/components/Switch.js index 149da07b8392..b9f20aca12d4 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -22,16 +22,15 @@ const OFFSET_X = { }; function Switch(props) { - const offsetX = useRef(new Animated.Value(props.isOn ? OFFSET_X.ON : OFFSET_X.OFF)).current; - const switchTransformStyle = {transform: [{translateX: offsetX}]} + const offsetX = useRef(new Animated.Value(props.isOn ? OFFSET_X.ON : OFFSET_X.OFF)); + const switchTransformStyle = {transform: [{translateX: offsetX.current}]} useEffect(() => { - Animated.timing(offsetX, { + Animated.timing(offsetX.current, { toValue: props.isOn ? OFFSET_X.ON : OFFSET_X.OFF, duration: 300, useNativeDriver: true, }).start(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.isOn]); return ( From 6c7b2c498e77ece24c4ef4652e30018e290949bb Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Sun, 30 Jul 2023 21:01:33 +0500 Subject: [PATCH 7/8] Fix lint --- src/components/Switch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Switch.js b/src/components/Switch.js index b9f20aca12d4..58604ab3e281 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -23,7 +23,7 @@ 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}]} + const switchTransformStyle = {transform: [{translateX: offsetX.current}]}; useEffect(() => { Animated.timing(offsetX.current, { From c85c33f41b057fc5c607d7c1ce3ebe33a49f2b8a Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Mon, 31 Jul 2023 00:02:48 +0500 Subject: [PATCH 8/8] Use style function for switch thumb transform style --- src/components/Switch.js | 3 +-- src/styles/styles.js | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Switch.js b/src/components/Switch.js index 58604ab3e281..3b7f464b00e5 100644 --- 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} > - + ); } diff --git a/src/styles/styles.js b/src/styles/styles.js index 0fe77205e9ad..ce2ac50fd349 100644 --- 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,