Skip to content

Commit b2e625a

Browse files
fabOnReactfacebook-github-bot
authored andcommitted
Switch component does not disable click (#33070)
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 <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/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
1 parent af793dd commit b2e625a

File tree

1 file changed

+11
-1
lines changed

1 file changed

+11
-1
lines changed

Libraries/Components/Switch/Switch.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,18 @@ const SwitchWithForwardedRef: React.AbstractComponent<
184184
}, [value, native]);
185185

186186
if (Platform.OS === 'android') {
187+
const {accessibilityState} = restProps;
188+
const _disabled =
189+
disabled != null ? disabled : accessibilityState?.disabled;
190+
191+
const _accessibilityState =
192+
_disabled !== accessibilityState?.disabled
193+
? {...accessibilityState, disabled: _disabled}
194+
: accessibilityState;
195+
187196
const platformProps = {
188-
enabled: disabled !== true,
197+
accessibilityState: _accessibilityState,
198+
enabled: _disabled !== true,
189199
on: value === true,
190200
style,
191201
thumbTintColor: thumbColor,

0 commit comments

Comments
 (0)