Skip to content

Migrated Switch to function component syntax #23857

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
deetergp merged 8 commits into from
Jul 31, 2023
Merged

Migrated Switch to function component syntax #23857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1224e3e
Migrated Switch to function component syntax
huzaifa-99 Jul 29, 2023
67456a2
Use ref instead of state for switch offset
huzaifa-99 Jul 29, 2023
f4182c2
Fix lint
huzaifa-99 Jul 29, 2023
eb51456
Added display name to switch
huzaifa-99 Jul 30, 2023
866c53a
Use functional style syntax for switch transform style
huzaifa-99 Jul 30, 2023
461ccda
Updated ref current value usage in switch
huzaifa-99 Jul 30, 2023
6c7b2c4
Fix lint
huzaifa-99 Jul 30, 2023
c85c33f
Use style function for switch thumb transform style
huzaifa-99 Jul 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 32 additions & 52 deletions src/components/Switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 */
Expand All @@ -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;

@s77rt s77rt Jul 30, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add displayName

@huzaifa-99 huzaifa-99 Jul 30, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Switch.displayName = 'Switch';

export default Switch;
4 changes: 4 additions & 0 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2504,6 +2504,10 @@ const styles = {
backgroundColor: themeColors.appBG,
},

switchThumbTransformation: (translateX) => ({
transform: [{translateX}],
}),

radioButtonContainer: {
backgroundColor: themeColors.componentBG,
borderRadius: 10,
Expand Down