Skip to content

Commit a6fdea3

Browse files
adrcotfasadrcotfas
committed
feat(Pressable): add support for PlatformColor and alpha
1 parent b1d12f5 commit a6fdea3

File tree

11 files changed

+497
-49
lines changed

11 files changed

+497
-49
lines changed

‎packages/react-native/Libraries/Components/Pressable/Pressable.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export interface PressableAndroidRippleConfig {
3030
borderless?: null | boolean | undefined;
3131
radius?: null | number | undefined;
3232
foreground?: null | boolean | undefined;
33+
alpha?: null | number | undefined;
3334
}
3435

3536
export interface PressableProps

‎packages/react-native/Libraries/Components/Pressable/__tests__/Pressable-test.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
*/
1010

1111
import {expectRendersMatchingSnapshot} from '../../../Utilities/ReactNativeTestTools';
12+
import Platform from '../../../Utilities/Platform';
13+
import {PlatformColor} from '../../../StyleSheet/PlatformColorValueTypes';
1214
import View from '../../View/View';
1315
import Pressable from '../Pressable';
1416
import * as React from 'react';
@@ -92,3 +94,65 @@ describe('<Pressable disabled={true} accessibilityState={{disabled: false}} />',
9294
);
9395
});
9496
});
97+
98+
describe('<Pressable android_ripple /> on Android', () => {
99+
let originalOS: string;
100+
101+
beforeEach(() => {
102+
originalOS = Platform.OS;
103+
/* $FlowFixMe[incompatible-type] */
104+
Platform.OS = 'android';
105+
});
106+
107+
afterEach(() => {
108+
/* $FlowFixMe[incompatible-type] */
109+
Platform.OS = originalOS;
110+
});
111+
112+
it('should set nativeBackgroundAndroid with numeric color and alpha', async () => {
113+
await expectRendersMatchingSnapshot(
114+
'Pressable',
115+
() => (
116+
<Pressable android_ripple={{color: '#FF0000', alpha: 0.5}}>
117+
<View />
118+
</Pressable>
119+
),
120+
() => {
121+
jest.dontMock('../Pressable');
122+
},
123+
);
124+
});
125+
126+
it('should set nativeBackgroundAndroid with PlatformColor and alpha', async () => {
127+
await expectRendersMatchingSnapshot(
128+
'Pressable',
129+
() => (
130+
<Pressable
131+
android_ripple={{color: PlatformColor('?attr/colorAccent'), alpha: 0.3}}>
132+
<View />
133+
</Pressable>
134+
),
135+
() => {
136+
jest.dontMock('../Pressable');
137+
},
138+
);
139+
});
140+
141+
it('should not crash with an unresolvable PlatformColor', async () => {
142+
await expectRendersMatchingSnapshot(
143+
'Pressable',
144+
() => (
145+
<Pressable
146+
android_ripple={{
147+
color: PlatformColor('?attr/doesNotExist'),
148+
alpha: 0.5,
149+
}}>
150+
<View />
151+
</Pressable>
152+
),
153+
() => {
154+
jest.dontMock('../Pressable');
155+
},
156+
);
157+
});
158+
});

‎packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,292 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
7272
</View>
7373
`;
7474

75+
exports[`<Pressable android_ripple /> on Android should not crash with an unresolvable PlatformColor: should deep render when mocked (please verify output manually) 1`] = `
76+
<View
77+
accessibilityState={
78+
Object {
79+
"busy": undefined,
80+
"checked": undefined,
81+
"disabled": undefined,
82+
"expanded": undefined,
83+
"selected": undefined,
84+
}
85+
}
86+
accessibilityValue={
87+
Object {
88+
"max": undefined,
89+
"min": undefined,
90+
"now": undefined,
91+
"text": undefined,
92+
}
93+
}
94+
accessible={true}
95+
collapsable={false}
96+
focusable={true}
97+
nativeBackgroundAndroid={
98+
Object {
99+
"alpha": 0.5,
100+
"borderless": false,
101+
"color": Object {
102+
"semantic": Array [
103+
"?attr/doesNotExist",
104+
],
105+
},
106+
"rippleRadius": undefined,
107+
"type": "RippleAndroid",
108+
}
109+
}
110+
onBlur={[Function]}
111+
onClick={[Function]}
112+
onFocus={[Function]}
113+
onResponderGrant={[Function]}
114+
onResponderMove={[Function]}
115+
onResponderRelease={[Function]}
116+
onResponderTerminate={[Function]}
117+
onResponderTerminationRequest={[Function]}
118+
onStartShouldSetResponder={[Function]}
119+
>
120+
<View />
121+
</View>
122+
`;
123+
124+
exports[`<Pressable android_ripple /> on Android should not crash with an unresolvable PlatformColor: should deep render when not mocked (please verify output manually) 1`] = `
125+
<View
126+
accessibilityState={
127+
Object {
128+
"busy": undefined,
129+
"checked": undefined,
130+
"disabled": undefined,
131+
"expanded": undefined,
132+
"selected": undefined,
133+
}
134+
}
135+
accessibilityValue={
136+
Object {
137+
"max": undefined,
138+
"min": undefined,
139+
"now": undefined,
140+
"text": undefined,
141+
}
142+
}
143+
accessible={true}
144+
collapsable={false}
145+
focusable={true}
146+
nativeBackgroundAndroid={
147+
Object {
148+
"alpha": 0.5,
149+
"borderless": false,
150+
"color": Object {
151+
"semantic": Array [
152+
"?attr/doesNotExist",
153+
],
154+
},
155+
"rippleRadius": undefined,
156+
"type": "RippleAndroid",
157+
}
158+
}
159+
onBlur={[Function]}
160+
onClick={[Function]}
161+
onFocus={[Function]}
162+
onResponderGrant={[Function]}
163+
onResponderMove={[Function]}
164+
onResponderRelease={[Function]}
165+
onResponderTerminate={[Function]}
166+
onResponderTerminationRequest={[Function]}
167+
onStartShouldSetResponder={[Function]}
168+
>
169+
<View />
170+
</View>
171+
`;
172+
173+
exports[`<Pressable android_ripple /> on Android should set nativeBackgroundAndroid with PlatformColor and alpha: should deep render when mocked (please verify output manually) 1`] = `
174+
<View
175+
accessibilityState={
176+
Object {
177+
"busy": undefined,
178+
"checked": undefined,
179+
"disabled": undefined,
180+
"expanded": undefined,
181+
"selected": undefined,
182+
}
183+
}
184+
accessibilityValue={
185+
Object {
186+
"max": undefined,
187+
"min": undefined,
188+
"now": undefined,
189+
"text": undefined,
190+
}
191+
}
192+
accessible={true}
193+
collapsable={false}
194+
focusable={true}
195+
nativeBackgroundAndroid={
196+
Object {
197+
"alpha": 0.3,
198+
"borderless": false,
199+
"color": Object {
200+
"semantic": Array [
201+
"?attr/colorAccent",
202+
],
203+
},
204+
"rippleRadius": undefined,
205+
"type": "RippleAndroid",
206+
}
207+
}
208+
onBlur={[Function]}
209+
onClick={[Function]}
210+
onFocus={[Function]}
211+
onResponderGrant={[Function]}
212+
onResponderMove={[Function]}
213+
onResponderRelease={[Function]}
214+
onResponderTerminate={[Function]}
215+
onResponderTerminationRequest={[Function]}
216+
onStartShouldSetResponder={[Function]}
217+
>
218+
<View />
219+
</View>
220+
`;
221+
222+
exports[`<Pressable android_ripple /> on Android should set nativeBackgroundAndroid with PlatformColor and alpha: should deep render when not mocked (please verify output manually) 1`] = `
223+
<View
224+
accessibilityState={
225+
Object {
226+
"busy": undefined,
227+
"checked": undefined,
228+
"disabled": undefined,
229+
"expanded": undefined,
230+
"selected": undefined,
231+
}
232+
}
233+
accessibilityValue={
234+
Object {
235+
"max": undefined,
236+
"min": undefined,
237+
"now": undefined,
238+
"text": undefined,
239+
}
240+
}
241+
accessible={true}
242+
collapsable={false}
243+
focusable={true}
244+
nativeBackgroundAndroid={
245+
Object {
246+
"alpha": 0.3,
247+
"borderless": false,
248+
"color": Object {
249+
"semantic": Array [
250+
"?attr/colorAccent",
251+
],
252+
},
253+
"rippleRadius": undefined,
254+
"type": "RippleAndroid",
255+
}
256+
}
257+
onBlur={[Function]}
258+
onClick={[Function]}
259+
onFocus={[Function]}
260+
onResponderGrant={[Function]}
261+
onResponderMove={[Function]}
262+
onResponderRelease={[Function]}
263+
onResponderTerminate={[Function]}
264+
onResponderTerminationRequest={[Function]}
265+
onStartShouldSetResponder={[Function]}
266+
>
267+
<View />
268+
</View>
269+
`;
270+
271+
exports[`<Pressable android_ripple /> on Android should set nativeBackgroundAndroid with numeric color and alpha: should deep render when mocked (please verify output manually) 1`] = `
272+
<View
273+
accessibilityState={
274+
Object {
275+
"busy": undefined,
276+
"checked": undefined,
277+
"disabled": undefined,
278+
"expanded": undefined,
279+
"selected": undefined,
280+
}
281+
}
282+
accessibilityValue={
283+
Object {
284+
"max": undefined,
285+
"min": undefined,
286+
"now": undefined,
287+
"text": undefined,
288+
}
289+
}
290+
accessible={true}
291+
collapsable={false}
292+
focusable={true}
293+
nativeBackgroundAndroid={
294+
Object {
295+
"alpha": 0.5,
296+
"borderless": false,
297+
"color": -65536,
298+
"rippleRadius": undefined,
299+
"type": "RippleAndroid",
300+
}
301+
}
302+
onBlur={[Function]}
303+
onClick={[Function]}
304+
onFocus={[Function]}
305+
onResponderGrant={[Function]}
306+
onResponderMove={[Function]}
307+
onResponderRelease={[Function]}
308+
onResponderTerminate={[Function]}
309+
onResponderTerminationRequest={[Function]}
310+
onStartShouldSetResponder={[Function]}
311+
>
312+
<View />
313+
</View>
314+
`;
315+
316+
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`] = `
317+
<View
318+
accessibilityState={
319+
Object {
320+
"busy": undefined,
321+
"checked": undefined,
322+
"disabled": undefined,
323+
"expanded": undefined,
324+
"selected": undefined,
325+
}
326+
}
327+
accessibilityValue={
328+
Object {
329+
"max": undefined,
330+
"min": undefined,
331+
"now": undefined,
332+
"text": undefined,
333+
}
334+
}
335+
accessible={true}
336+
collapsable={false}
337+
focusable={true}
338+
nativeBackgroundAndroid={
339+
Object {
340+
"alpha": 0.5,
341+
"borderless": false,
342+
"color": -65536,
343+
"rippleRadius": undefined,
344+
"type": "RippleAndroid",
345+
}
346+
}
347+
onBlur={[Function]}
348+
onClick={[Function]}
349+
onFocus={[Function]}
350+
onResponderGrant={[Function]}
351+
onResponderMove={[Function]}
352+
onResponderRelease={[Function]}
353+
onResponderTerminate={[Function]}
354+
onResponderTerminationRequest={[Function]}
355+
onStartShouldSetResponder={[Function]}
356+
>
357+
<View />
358+
</View>
359+
`;
360+
75361
exports[`<Pressable disabled={true} /> should be disabled when disabled is true: should deep render when mocked (please verify output manually) 1`] = `
76362
<View
77363
accessibilityState={

0 commit comments

Comments
 (0)