Switch component does not disable click (#33070)

fabOnReact · facebook-github-bot · commit b2e625a51723 · 2022-02-16T15:02:59.000-08:00
Summary: This issue fixes #30944 fixes #30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR #31199. The issue is caused by the missing prop `accessibilityState` in the Switch component. The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]). Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409. [8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289 The solution proposed in this pull request consists of: 1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent` 2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value. For example: ```jsx <Switch disabled={true} accessibilityState={{disabled: false}} /> ```` becomes: ````jsx <Switch disabled={true} accessibilityState={{disabled: true}} /> ```` ## Changelog  [General] [Fixed] - Switch Component doesn't disable click functionality when disabled Pull Request resolved: #33070 Test Plan: [1]. Switch has `disabled` and `accessibilityState={{disabled: false}}` [2]. Switch has `disabled` [3]. Switch has `accessibilityState={{disabled: true}}` [4]. Switch has `accessibilityState={{disabled:false}}` [5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}` 7. Test Cases on the main branch [7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}` [7.3] Switch has `accessibilityState={{disabled: true}}` [7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}` [1]: fabOnReact/react-native-notes#5 (comment) [2]: fabOnReact/react-native-notes#5 (comment) [3]: fabOnReact/react-native-notes#5 (comment) [4]: fabOnReact/react-native-notes#5 (comment) [5]: fabOnReact/react-native-notes#5 (comment) [7.1]: fabOnReact/react-native-notes#5 (comment) [7.3]: fabOnReact/react-native-notes#5 (comment) [7.5]: fabOnReact/react-native-notes#5 (comment) Reviewed By: kacieb Differential Revision: D34189484 Pulled By: blavalla fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js
@@ -184,8 +184,18 @@ const SwitchWithForwardedRef: React.AbstractComponent<
   }, [value, native]);
 
   if (Platform.OS === 'android') {
+    const {accessibilityState} = restProps;
+    const _disabled =
+      disabled != null ? disabled : accessibilityState?.disabled;
+
+    const _accessibilityState =
+      _disabled !== accessibilityState?.disabled
+        ? {...accessibilityState, disabled: _disabled}
+        : accessibilityState;
+
     const platformProps = {
-      enabled: disabled !== true,
+      accessibilityState: _accessibilityState,
+      enabled: _disabled !== true,
       on: value === true,
       style,
       thumbTintColor: thumbColor,
