diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index 48fbbff0326180..cad70b69e1baae 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -168,10 +168,16 @@ function Pressable(props: Props, forwardedRef): React.Node { const hitSlop = normalizeRect(props.hitSlop); + const accessibilityState = + disabled != null + ? {...props.accessibilityState, disabled} + : props.accessibilityState; + const restPropsWithDefaults: React.ElementConfig = { ...restProps, ...android_rippleConfig?.viewProps, accessible: accessible !== false, + accessibilityState, focusable: focusable !== false, hitSlop, }; diff --git a/Libraries/Components/Pressable/__tests__/Pressable-test.js b/Libraries/Components/Pressable/__tests__/Pressable-test.js index 37b9684d50e01e..46909623347aa1 100644 --- a/Libraries/Components/Pressable/__tests__/Pressable-test.js +++ b/Libraries/Components/Pressable/__tests__/Pressable-test.js @@ -30,3 +30,67 @@ describe('', () => { ); }); }); + +describe('', () => { + it('should be disabled when disabled is true', () => { + expectRendersMatchingSnapshot( + 'Pressable', + () => ( + + + + ), + () => { + jest.dontMock('../Pressable'); + }, + ); + }); +}); + +describe('', () => { + it('should be disabled when disabled is true and accessibilityState is empty', () => { + expectRendersMatchingSnapshot( + 'Pressable', + () => ( + + + + ), + () => { + jest.dontMock('../Pressable'); + }, + ); + }); +}); + +describe('', () => { + it('should keep accessibilityState when disabled is true', () => { + expectRendersMatchingSnapshot( + 'Pressable', + () => ( + + + + ), + () => { + jest.dontMock('../Pressable'); + }, + ); + }); +}); + +describe('', () => { + it('should overwrite accessibilityState with value of disabled prop', () => { + expectRendersMatchingSnapshot( + 'Pressable', + () => ( + + + + ), + () => { + jest.dontMock('../Pressable'); + }, + ); + }); +}); diff --git a/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap b/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap index 231a8613c46744..821d4f41ea56e5 100644 --- a/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap +++ b/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap @@ -49,3 +49,283 @@ exports[` should render as expected: should shallow render as `; + +exports[` should be disabled when disabled is true: should deep render when mocked (please verify output manually) 1`] = ` + + + +`; + +exports[` should be disabled when disabled is true: should deep render when not mocked (please verify output manually) 1`] = ` + + + +`; + +exports[` should be disabled when disabled is true: should shallow render as when mocked 1`] = ` + + + +`; + +exports[` should be disabled when disabled is true: should shallow render as when not mocked 1`] = ` + + + +`; + +exports[` should be disabled when disabled is true and accessibilityState is empty: should deep render when mocked (please verify output manually) 1`] = ` + + + +`; + +exports[` should be disabled when disabled is true and accessibilityState is empty: should deep render when not mocked (please verify output manually) 1`] = ` + + + +`; + +exports[` should be disabled when disabled is true and accessibilityState is empty: should shallow render as when mocked 1`] = ` + + + +`; + +exports[` should be disabled when disabled is true and accessibilityState is empty: should shallow render as when not mocked 1`] = ` + + + +`; + +exports[` should keep accessibilityState when disabled is true: should deep render when mocked (please verify output manually) 1`] = ` + + + +`; + +exports[` should keep accessibilityState when disabled is true: should deep render when not mocked (please verify output manually) 1`] = ` + + + +`; + +exports[` should keep accessibilityState when disabled is true: should shallow render as when mocked 1`] = ` + + + +`; + +exports[` should keep accessibilityState when disabled is true: should shallow render as when not mocked 1`] = ` + + + +`; + +exports[` should overwrite accessibilityState with value of disabled prop: should deep render when mocked (please verify output manually) 1`] = ` + + + +`; + +exports[` should overwrite accessibilityState with value of disabled prop: should deep render when not mocked (please verify output manually) 1`] = ` + + + +`; + +exports[` should overwrite accessibilityState with value of disabled prop: should shallow render as when mocked 1`] = ` + + + +`; + +exports[` should overwrite accessibilityState with value of disabled prop: should shallow render as when not mocked 1`] = ` + + + +`; diff --git a/Libraries/Pressability/Pressability.js b/Libraries/Pressability/Pressability.js index 041c589cf9bee0..bae328b055185f 100644 --- a/Libraries/Pressability/Pressability.js +++ b/Libraries/Pressability/Pressability.js @@ -543,8 +543,8 @@ export default class Pressability { }, onClick: (event: PressEvent): void => { - const {onPress} = this._config; - if (onPress != null) { + const {onPress, disabled} = this._config; + if (onPress != null && disabled !== true) { onPress(event); } },