From b2e625a51723becea4cef0433448fbec679669ee Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 16 Feb 2022 15:01:37 -0800 Subject: [PATCH] Switch component does not disable click (#33070) Summary: This issue fixes https://github.com/facebook/react-native/issues/30944 fixes https://github.com/facebook/react-native/issues/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 https://github.com/facebook/react-native/pull/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 https://github.com/facebook/react-native/issues/30840#issuecomment-780981316 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 ```` becomes: ````jsx ```` ## Changelog [General] [Fixed] - Switch Component doesn't disable click functionality when disabled Pull Request resolved: https://github.com/facebook/react-native/pull/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]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/5#issuecomment-1031168488 [2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/5#issuecomment-1031168868 [3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/5#issuecomment-1031169167 [4]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/5#issuecomment-1031170883 [5]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/5#issuecomment-1031170989 [7.1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/5#issuecomment-1031171560 [7.3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/5#issuecomment-1031172605 [7.5]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/5#issuecomment-1031173437 Reviewed By: kacieb Differential Revision: D34189484 Pulled By: blavalla fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f --- Libraries/Components/Switch/Switch.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js index 6c90f3d49c9..487df01c31a 100644 --- 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,