Skip to content

feat(Pressable): add support for PlatformColor and alpha #56395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adrcotfas wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(Pressable): add support for PlatformColor and alpha #56395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/react-native/Libraries/Components/Pressable/Pressable.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export interface PressableAndroidRippleConfig {
borderless?: null | boolean | undefined;
radius?: null | number | undefined;
foreground?: null | boolean | undefined;
alpha?: null | number | undefined;
}

export interface PressableProps
Expand Down
64 changes: 64 additions & 0 deletions packages/react-native/Libraries/Components/Pressable/__tests__/Pressable-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
*/

import {expectRendersMatchingSnapshot} from '../../../Utilities/ReactNativeTestTools';
import Platform from '../../../Utilities/Platform';
import {PlatformColor} from '../../../StyleSheet/PlatformColorValueTypes';
import View from '../../View/View';
import Pressable from '../Pressable';
import * as React from 'react';
Expand Down Expand Up @@ -92,3 +94,65 @@ describe('<Pressable disabled={true} accessibilityState={{disabled: false}} />',
);
});
});

describe('<Pressable android_ripple /> on Android', () => {
let originalOS: string;

beforeEach(() => {
originalOS = Platform.OS;
/* $FlowFixMe[incompatible-type] */
Platform.OS = 'android';
});

afterEach(() => {
/* $FlowFixMe[incompatible-type] */
Platform.OS = originalOS;
});

it('should set nativeBackgroundAndroid with numeric color and alpha', async () => {
await expectRendersMatchingSnapshot(
'Pressable',
() => (
<Pressable android_ripple={{color: '#FF0000', alpha: 0.5}}>
<View />
</Pressable>
),
() => {
jest.dontMock('../Pressable');
},
);
});

it('should set nativeBackgroundAndroid with PlatformColor and alpha', async () => {
await expectRendersMatchingSnapshot(
'Pressable',
() => (
<Pressable
android_ripple={{color: PlatformColor('?attr/colorAccent'), alpha: 0.3}}>
<View />
</Pressable>
),
() => {
jest.dontMock('../Pressable');
},
);
});

it('should not crash with an unresolvable PlatformColor', async () => {
await expectRendersMatchingSnapshot(
'Pressable',
() => (
<Pressable
android_ripple={{
color: PlatformColor('?attr/doesNotExist'),
alpha: 0.5,
}}>
<View />
</Pressable>
),
() => {
jest.dontMock('../Pressable');
},
);
});
});
286 changes: 286 additions & 0 deletions ...eact-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,292 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
</View>
`;

exports[`<Pressable android_ripple /> on Android should not crash with an unresolvable PlatformColor: should deep render when mocked (please verify output manually) 1`] = `
<View
accessibilityState={
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
Object {
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
nativeBackgroundAndroid={
Object {
"alpha": 0.5,
"borderless": false,
"color": Object {
"semantic": Array [
"?attr/doesNotExist",
],
},
"rippleRadius": undefined,
"type": "RippleAndroid",
}
}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
<View />
</View>
`;

exports[`<Pressable android_ripple /> on Android should not crash with an unresolvable PlatformColor: should deep render when not mocked (please verify output manually) 1`] = `
<View
accessibilityState={
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
Object {
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
nativeBackgroundAndroid={
Object {
"alpha": 0.5,
"borderless": false,
"color": Object {
"semantic": Array [
"?attr/doesNotExist",
],
},
"rippleRadius": undefined,
"type": "RippleAndroid",
}
}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
<View />
</View>
`;

exports[`<Pressable android_ripple /> on Android should set nativeBackgroundAndroid with PlatformColor and alpha: should deep render when mocked (please verify output manually) 1`] = `
<View
accessibilityState={
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
Object {
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
nativeBackgroundAndroid={
Object {
"alpha": 0.3,
"borderless": false,
"color": Object {
"semantic": Array [
"?attr/colorAccent",
],
},
"rippleRadius": undefined,
"type": "RippleAndroid",
}
}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
<View />
</View>
`;

exports[`<Pressable android_ripple /> on Android should set nativeBackgroundAndroid with PlatformColor and alpha: should deep render when not mocked (please verify output manually) 1`] = `
<View
accessibilityState={
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
Object {
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
nativeBackgroundAndroid={
Object {
"alpha": 0.3,
"borderless": false,
"color": Object {
"semantic": Array [
"?attr/colorAccent",
],
},
"rippleRadius": undefined,
"type": "RippleAndroid",
}
}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
<View />
</View>
`;

exports[`<Pressable android_ripple /> on Android should set nativeBackgroundAndroid with numeric color and alpha: should deep render when mocked (please verify output manually) 1`] = `
<View
accessibilityState={
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
Object {
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
nativeBackgroundAndroid={
Object {
"alpha": 0.5,
"borderless": false,
"color": -65536,
"rippleRadius": undefined,
"type": "RippleAndroid",
}
}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
<View />
</View>
`;

exports[`<Pressable android_ripple /> on Android should set nativeBackgroundAndroid with numeric color and alpha: should deep render when not mocked (please verify output manually) 1`] = `
<View
accessibilityState={
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
Object {
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
nativeBackgroundAndroid={
Object {
"alpha": 0.5,
"borderless": false,
"color": -65536,
"rippleRadius": undefined,
"type": "RippleAndroid",
}
}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
<View />
</View>
`;

exports[`<Pressable disabled={true} /> should be disabled when disabled is true: should deep render when mocked (please verify output manually) 1`] = `
<View
accessibilityState={
Expand Down
Loading