Skip to content

Commit 82e0d8c

Browse files
retyuiretyui
committed
chore: Remove useAndroidRippleForView impl. from iOS platforms
1 parent 0f9cc46 commit 82e0d8c

6 files changed

Lines changed: 133 additions & 92 deletions

File tree

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,14 @@ import type {
1515
MouseEvent,
1616
} from '../../Types/CoreEventTypes';
1717
import type {ViewProps} from '../View/ViewPropTypes';
18+
import type {PressableAndroidRippleConfig} from './useAndroidRippleForView.types';
1819

1920
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
2021
import usePressability from '../../Pressability/usePressability';
2122
import {type RectOrSize} from '../../StyleSheet/Rect';
2223
import useMergeRefs from '../../Utilities/useMergeRefs';
2324
import View from '../View/View';
24-
import useAndroidRippleForView, {
25-
type PressableAndroidRippleConfig,
26-
} from './useAndroidRippleForView';
25+
import useAndroidRippleForView from './useAndroidRippleForView';
2726
import * as React from 'react';
2827
import {memo, useMemo, useRef, useState} from 'react';
2928

‎packages/react-native/Libraries/Components/Pressable/useAndroidRippleForView.android.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow strict-local
8+
* @format
9+
*/
10+
11+
import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
12+
import type {
13+
AndroidRippleForViewResult,
14+
PressableAndroidRippleConfig,
15+
} from './useAndroidRippleForView.types';
16+
17+
import processColor from '../../StyleSheet/processColor';
18+
import View from '../View/View';
19+
import {Commands} from '../View/ViewNativeComponent';
20+
import invariant from 'invariant';
21+
import * as React from 'react';
22+
import {useMemo} from 'react';
23+
24+
/**
25+
* Provides the event handlers and props for configuring the ripple effect on
26+
* supported versions of Android.
27+
*/
28+
export default function useAndroidRippleForView(
29+
rippleConfig: ?PressableAndroidRippleConfig,
30+
viewRef: {current: null | React.ElementRef<typeof View>},
31+
): ?AndroidRippleForViewResult {
32+
const {color, borderless, radius, foreground} = rippleConfig ?? {};
33+
34+
return useMemo(() => {
35+
if (color != null || borderless != null || radius != null) {
36+
const processedColor = processColor(color);
37+
invariant(
38+
processedColor == null || typeof processedColor === 'number',
39+
'Unexpected color given for Ripple color',
40+
);
41+
42+
const nativeRippleValue = {
43+
type: 'RippleAndroid',
44+
color: processedColor,
45+
borderless: borderless === true,
46+
rippleRadius: radius,
47+
};
48+
49+
return {
50+
viewProps:
51+
foreground === true
52+
? // $FlowFixMe[incompatible-type]
53+
{nativeForegroundAndroid: nativeRippleValue}
54+
: // $FlowFixMe[incompatible-type]
55+
{nativeBackgroundAndroid: nativeRippleValue},
56+
onPressIn(event: GestureResponderEvent): void {
57+
const view = viewRef.current;
58+
if (view != null) {
59+
Commands.hotspotUpdate(
60+
view,
61+
event.nativeEvent.locationX ?? 0,
62+
event.nativeEvent.locationY ?? 0,
63+
);
64+
Commands.setPressed(view, true);
65+
}
66+
},
67+
onPressMove(event: GestureResponderEvent): void {
68+
const view = viewRef.current;
69+
if (view != null) {
70+
Commands.hotspotUpdate(
71+
view,
72+
event.nativeEvent.locationX ?? 0,
73+
event.nativeEvent.locationY ?? 0,
74+
);
75+
}
76+
},
77+
onPressOut(event: GestureResponderEvent): void {
78+
const view = viewRef.current;
79+
if (view != null) {
80+
Commands.setPressed(view, false);
81+
}
82+
},
83+
};
84+
}
85+
return null;
86+
}, [borderless, color, foreground, radius, viewRef]);
87+
}

‎packages/react-native/Libraries/Components/Pressable/useAndroidRippleForView.js‎

Lines changed: 6 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,13 @@
88
* @format
99
*/
1010

11-
import type {ColorValue} from '../../StyleSheet/StyleSheet';
12-
import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
11+
import type {
12+
AndroidRippleForViewResult,
13+
PressableAndroidRippleConfig,
14+
} from './useAndroidRippleForView.types';
1315

14-
import processColor from '../../StyleSheet/processColor';
15-
import Platform from '../../Utilities/Platform';
1616
import View from '../View/View';
17-
import {Commands} from '../View/ViewNativeComponent';
18-
import invariant from 'invariant';
1917
import * as React from 'react';
20-
import {useMemo} from 'react';
21-
22-
type NativeBackgroundProp = Readonly<{
23-
type: 'RippleAndroid',
24-
color: ?number,
25-
borderless: boolean,
26-
rippleRadius: ?number,
27-
}>;
28-
29-
export type PressableAndroidRippleConfig = {
30-
color?: ColorValue,
31-
borderless?: boolean,
32-
radius?: number,
33-
foreground?: boolean,
34-
};
3518

3619
/**
3720
* Provides the event handlers and props for configuring the ripple effect on
@@ -40,70 +23,6 @@ export type PressableAndroidRippleConfig = {
4023
export default function useAndroidRippleForView(
4124
rippleConfig: ?PressableAndroidRippleConfig,
4225
viewRef: {current: null | React.ElementRef<typeof View>},
43-
): ?Readonly<{
44-
onPressIn: (event: GestureResponderEvent) => void,
45-
onPressMove: (event: GestureResponderEvent) => void,
46-
onPressOut: (event: GestureResponderEvent) => void,
47-
viewProps:
48-
| Readonly<{nativeBackgroundAndroid: NativeBackgroundProp}>
49-
| Readonly<{nativeForegroundAndroid: NativeBackgroundProp}>,
50-
}> {
51-
const {color, borderless, radius, foreground} = rippleConfig ?? {};
52-
53-
return useMemo(() => {
54-
if (
55-
Platform.OS === 'android' &&
56-
(color != null || borderless != null || radius != null)
57-
) {
58-
const processedColor = processColor(color);
59-
invariant(
60-
processedColor == null || typeof processedColor === 'number',
61-
'Unexpected color given for Ripple color',
62-
);
63-
64-
const nativeRippleValue = {
65-
type: 'RippleAndroid',
66-
color: processedColor,
67-
borderless: borderless === true,
68-
rippleRadius: radius,
69-
};
70-
71-
return {
72-
viewProps:
73-
foreground === true
74-
? // $FlowFixMe[incompatible-type]
75-
{nativeForegroundAndroid: nativeRippleValue}
76-
: // $FlowFixMe[incompatible-type]
77-
{nativeBackgroundAndroid: nativeRippleValue},
78-
onPressIn(event: GestureResponderEvent): void {
79-
const view = viewRef.current;
80-
if (view != null) {
81-
Commands.hotspotUpdate(
82-
view,
83-
event.nativeEvent.locationX ?? 0,
84-
event.nativeEvent.locationY ?? 0,
85-
);
86-
Commands.setPressed(view, true);
87-
}
88-
},
89-
onPressMove(event: GestureResponderEvent): void {
90-
const view = viewRef.current;
91-
if (view != null) {
92-
Commands.hotspotUpdate(
93-
view,
94-
event.nativeEvent.locationX ?? 0,
95-
event.nativeEvent.locationY ?? 0,
96-
);
97-
}
98-
},
99-
onPressOut(event: GestureResponderEvent): void {
100-
const view = viewRef.current;
101-
if (view != null) {
102-
Commands.setPressed(view, false);
103-
}
104-
},
105-
};
106-
}
107-
return null;
108-
}, [borderless, color, foreground, radius, viewRef]);
26+
): ?AndroidRippleForViewResult {
27+
return null; // Do nothing for non-Android platform (see .android.js file)
10928
}

‎packages/react-native/Libraries/Components/Pressable/useAndroidRippleForView.types.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow strict-local
8+
* @format
9+
*/
10+
11+
import type {ColorValue} from '../../StyleSheet/StyleSheet';
12+
import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
13+
14+
export type NativeBackgroundProp = Readonly<{
15+
type: 'RippleAndroid',
16+
color: ?number,
17+
borderless: boolean,
18+
rippleRadius: ?number,
19+
}>;
20+
21+
export type PressableAndroidRippleConfig = {
22+
color?: ColorValue,
23+
borderless?: boolean,
24+
radius?: number,
25+
foreground?: boolean,
26+
};
27+
28+
export type AndroidRippleForViewResult = Readonly<{
29+
onPressIn: (event: GestureResponderEvent) => void,
30+
onPressMove: (event: GestureResponderEvent) => void,
31+
onPressOut: (event: GestureResponderEvent) => void,
32+
viewProps:
33+
| Readonly<{nativeBackgroundAndroid: NativeBackgroundProp}>
34+
| Readonly<{nativeForegroundAndroid: NativeBackgroundProp}>,
35+
}>;

‎packages/react-native/src/private/components/scrollview/HScrollViewNativeComponents.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import ScrollContentViewNativeComponent from '../../../../Libraries/Components/S
1616
import ScrollViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
1717

1818
export const HScrollViewNativeComponent: HostComponent<ScrollViewNativeProps> =
19-
ScrollViewNativeComponent;
19+
ScrollViewNativeComponent;
2020

2121
export const HScrollContentViewNativeComponent: HostComponent<ViewProps> =
2222
ScrollContentViewNativeComponent;

‎packages/react-native/src/private/components/scrollview/VScrollViewNativeComponents.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,5 @@ import ScrollViewNativeComponent from '../../../../Libraries/Components/ScrollVi
1818
export const VScrollViewNativeComponent: HostComponent<ScrollViewNativeProps> =
1919
ScrollViewNativeComponent;
2020

21-
export const VScrollContentViewNativeComponent: HostComponent<ViewProps> = ScrollContentViewNativeComponent;
21+
export const VScrollContentViewNativeComponent: HostComponent<ViewProps> =
22+
ScrollContentViewNativeComponent;

0 commit comments

Comments
 (0)