Cleanup for shipping use_switch_modern

Summary: Changelog: [General][Changed] - Refactor Switch component to functional and remove experimentation around it Reviewed By: kacieb Differential Revision: D28127518 fbshipit-source-id: c71d305a2caa8b3342ba603133c6e28c34410528
facebook · May 3, 2021 · ab66741 · ab66741
1 parent 2e0e3f7
commit ab66741
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 132 deletions.
diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js
@@ -12,7 +12,6 @@
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 import StyleSheet from '../../StyleSheet/StyleSheet';
-import SwitchInjection from './SwitchInjection';
 
 import AndroidSwitchNativeComponent, {
  Commands as AndroidSwitchCommands,
@@ -86,6 +85,8 @@ export type Props = $ReadOnly<{|
  */
  onValueChange?: ?(value: boolean) => Promise<void> | void,
 |}>;
+const returnsFalse = () => false;
+const returnsTrue = () => true;
 
 /**
  Renders a boolean input.
@@ -128,132 +129,103 @@ export type Props = $ReadOnly<{|
  export default App;
  ```
  */
-class Switch extends React.Component<Props> {
- _nativeSwitchRef: ?React.ElementRef<
+export default function Switch(props: Props): React.Node {
+ const {
+ disabled,
+ ios_backgroundColor,
+ onChange,
+ onValueChange,
+ style,
+ thumbColor,
+ trackColor,
+ value,
+ ...restProps
+ } = props;
+ const trackColorForFalse = trackColor?.false;
+ const trackColorForTrue = trackColor?.true;
+
+ const nativeSwitchRef = React.useRef<?React.ElementRef<
  typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
- >;
- _lastNativeValue: ?boolean;
-
- render(): React.Node {
- const {
- disabled,
- ios_backgroundColor,
- onChange,
- onValueChange,
- style,
- thumbColor,
- trackColor,
- value,
- ...props
- } = this.props;
+ >>(null);
+ const [native, setNative] = React.useState({value: null});
 
- const trackColorForFalse = trackColor?.false;
- const trackColorForTrue = trackColor?.true;
-
- if (Platform.OS === 'android') {
- const platformProps = {
- enabled: disabled !== true,
- on: value === true,
- style,
- thumbTintColor: thumbColor,
- trackColorForFalse: trackColorForFalse,
- trackColorForTrue: trackColorForTrue,
- trackTintColor: value === true ? trackColorForTrue : trackColorForFalse,
- };
-
- return (
- <AndroidSwitchNativeComponent
- {...props}
- {...platformProps}
- accessibilityRole={props.accessibilityRole ?? 'switch'}
- onChange={this._handleChange}
- onResponderTerminationRequest={returnsFalse}
- onStartShouldSetResponder={returnsTrue}
- ref={this._handleSwitchNativeComponentRef}
- />
- );
- } else {
- const platformProps = {
- disabled,
- onTintColor: trackColorForTrue,
- style: StyleSheet.compose(
- {height: 31, width: 51},
- StyleSheet.compose(
- style,
- ios_backgroundColor == null
- ? null
- : {
- backgroundColor: ios_backgroundColor,
- borderRadius: 16,
- },
- ),
- ),
- thumbTintColor: thumbColor,
- tintColor: trackColorForFalse,
- value: value === true,
- };
-
- return (
- <SwitchNativeComponent
- {...props}
- {...platformProps}
- accessibilityRole={props.accessibilityRole ?? 'switch'}
- onChange={this._handleChange}
- onResponderTerminationRequest={returnsFalse}
- onStartShouldSetResponder={returnsTrue}
- ref={this._handleSwitchNativeComponentRef}
- />
- );
- }
- }
+ const handleChange = (event: SwitchChangeEvent) => {
+ onChange?.(event);
+ onValueChange?.(event.nativeEvent.value);
+ setNative({value: event.nativeEvent.value});
+ };
 
- componentDidUpdate() {
+ React.useLayoutEffect(() => {
  // This is necessary in case native updates the switch and JS decides
  // that the update should be ignored and we should stick with the value
  // that we have in JS.
- const value = this.props.value === true;
- const nativeValue = this._lastNativeValue !== value ? value : null;
-
+ const jsValue = value === true;
+ const shouldUpdateNativeSwitch = native.value !== jsValue;
  if (
- nativeValue != null &&
- this._nativeSwitchRef &&
- this._nativeSwitchRef.setNativeProps
+ shouldUpdateNativeSwitch &&
+ nativeSwitchRef.current?.setNativeProps != null
  ) {
  if (Platform.OS === 'android') {
- AndroidSwitchCommands.setNativeValue(
- this._nativeSwitchRef,
- nativeValue,
- );
+ AndroidSwitchCommands.setNativeValue(nativeSwitchRef.current, jsValue);
  } else {
- SwitchCommands.setValue(this._nativeSwitchRef, nativeValue);
+ SwitchCommands.setValue(nativeSwitchRef.current, jsValue);
  }
  }
- }
+ }, [value, native]);
 
- _handleChange = (event: SwitchChangeEvent) => {
- if (this.props.onChange != null) {
- this.props.onChange(event);
- }
-
- if (this.props.onValueChange != null) {
- this.props.onValueChange(event.nativeEvent.value);
- }
+ if (Platform.OS === 'android') {
+ const platformProps = {
+ enabled: disabled !== true,
+ on: value === true,
+ style,
+ thumbTintColor: thumbColor,
+ trackColorForFalse: trackColorForFalse,
+ trackColorForTrue: trackColorForTrue,
+ trackTintColor: value === true ? trackColorForTrue : trackColorForFalse,
+ };
 
- this._lastNativeValue = event.nativeEvent.value;
- this.forceUpdate();
- };
+ return (
+ <AndroidSwitchNativeComponent
+ {...restProps}
+ {...platformProps}
+ accessibilityRole={props.accessibilityRole ?? 'switch'}
+ onChange={handleChange}
+ onResponderTerminationRequest={returnsFalse}
+ onStartShouldSetResponder={returnsTrue}
+ ref={nativeSwitchRef}
+ />
+ );
+ } else {
+ const platformProps = {
+ disabled,
+ onTintColor: trackColorForTrue,
+ style: StyleSheet.compose(
+ {height: 31, width: 51},
+ StyleSheet.compose(
+ style,
+ ios_backgroundColor == null
+ ? null
+ : {
+ backgroundColor: ios_backgroundColor,
+ borderRadius: 16,
+ },
+ ),
+ ),
+ thumbTintColor: thumbColor,
+ tintColor: trackColorForFalse,
+ value: value === true,
+ };
 
- _handleSwitchNativeComponentRef = (
- ref: ?React.ElementRef<
- typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
- >,
- ) => {
- this._nativeSwitchRef = ref;
- };
+ return (
+ <SwitchNativeComponent
+ {...restProps}
+ {...platformProps}
+ accessibilityRole={props.accessibilityRole ?? 'switch'}
+ onChange={handleChange}
+ onResponderTerminationRequest={returnsFalse}
+ onStartShouldSetResponder={returnsTrue}
+ ref={nativeSwitchRef}
+ />
+ );
+ }
 }
-
-const returnsFalse = () => false;
-const returnsTrue = () => true;
-
-module.exports = (SwitchInjection.unstable_Switch ??
- Switch: React.AbstractComponent<React.ElementConfig<typeof Switch>>);
diff --git a/Libraries/Components/Switch/SwitchInjection.js b/Libraries/Components/Switch/SwitchInjection.js
diff --git a/index.js b/index.js
@@ -244,7 +244,7 @@ module.exports = {
  return require('./Libraries/Components/StatusBar/StatusBar');
  },
  get Switch(): Switch {
- return require('./Libraries/Components/Switch/Switch');
+ return require('./Libraries/Components/Switch/Switch').default;
  },
  get Text(): Text {
  return require('./Libraries/Text/Text');