Skip to content

Commit

Permalink
Switch component does not disable click (#33070)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
fabOnReact authored and facebook-github-bot committed Feb 16, 2022
1 parent af793dd commit b2e625a
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion Libraries/Components/Switch/Switch.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit b2e625a

Please sign in to comment.