Skip to content

Commit 6ecd0b5

Browse files
okwasniewskiSaadnajmi
okwasniewski
and
Saadnajmi
committed
chore: remove hover effect & add cursor: pointer (#122)
* chore: remove hover effect * fix: set cursor pointer by default, update tests * feat(iOS): Implement cursor style prop # Conflicts: # packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts --------- Co-authored-by: Saad Najmi <sanajmi@microsoft.com>
1 parent 46ae403 commit 6ecd0b5

File tree

17 files changed

+213
-144
lines changed

17 files changed

+213
-144
lines changed

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

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ import type {
2020
AccessibilityState,
2121
AccessibilityValue,
2222
} from '../View/ViewAccessibility';
23-
import type {HoverEffect} from '../View/ViewPropTypes';
2423

2524
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
2625
import usePressability from '../../Pressability/usePressability';
2726
import {type RectOrSize} from '../../StyleSheet/Rect';
27+
import StyleSheet from '../../StyleSheet/StyleSheet';
2828
import useMergeRefs from '../../Utilities/useMergeRefs';
2929
import View from '../View/View';
3030
import useAndroidRippleForView, {
@@ -33,18 +33,12 @@ import useAndroidRippleForView, {
3333
import * as React from 'react';
3434
import {useMemo, useRef, useState} from 'react';
3535

36-
const defaultHoverEffect: HoverEffect = 'highlight';
37-
3836
type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
3937

4038
export type StateCallbackType = $ReadOnly<{|
4139
pressed: boolean,
4240
|}>;
4341

44-
type VisionOSProps = $ReadOnly<{|
45-
visionos_hoverEffect?: ?HoverEffect,
46-
|}>;
47-
4842
type Props = $ReadOnly<{|
4943
/**
5044
* Accessibility.
@@ -200,10 +194,6 @@ type Props = $ReadOnly<{|
200194
* https://github.com/facebook/react-native/issues/34424
201195
*/
202196
'aria-label'?: ?string,
203-
/**
204-
* Props needed for visionOS.
205-
*/
206-
...VisionOSProps,
207197
|}>;
208198

209199
/**
@@ -243,7 +233,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
243233
style,
244234
testOnly_pressed,
245235
unstable_pressDelay,
246-
visionos_hoverEffect = defaultHoverEffect,
247236
...restProps
248237
} = props;
249238

@@ -352,15 +341,23 @@ function Pressable(props: Props, forwardedRef): React.Node {
352341
{...restPropsWithDefaults}
353342
{...eventHandlers}
354343
ref={mergedRef}
355-
style={typeof style === 'function' ? style({pressed}) : style}
356-
collapsable={false}
357-
visionos_hoverEffect={visionos_hoverEffect}>
344+
style={[
345+
styles.pressable,
346+
typeof style === 'function' ? style({pressed}) : style,
347+
]}
348+
collapsable={false}>
358349
{typeof children === 'function' ? children({pressed}) : children}
359350
{__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}
360351
</View>
361352
);
362353
}
363354

355+
const styles = StyleSheet.create({
356+
pressable: {
357+
cursor: 'pointer',
358+
},
359+
});
360+
364361
function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
365362
const [pressed, setPressed] = useState(false);
366363
return [pressed || forcePressed, setPressed];

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

Lines changed: 80 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,14 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
3131
onResponderTerminate={[Function]}
3232
onResponderTerminationRequest={[Function]}
3333
onStartShouldSetResponder={[Function]}
34-
visionos_hoverEffect="highlight"
34+
style={
35+
Array [
36+
Object {
37+
"cursor": "pointer",
38+
},
39+
undefined,
40+
]
41+
}
3542
>
3643
<View />
3744
</View>
@@ -68,7 +75,14 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
6875
onResponderTerminate={[Function]}
6976
onResponderTerminationRequest={[Function]}
7077
onStartShouldSetResponder={[Function]}
71-
visionos_hoverEffect="highlight"
78+
style={
79+
Array [
80+
Object {
81+
"cursor": "pointer",
82+
},
83+
undefined,
84+
]
85+
}
7286
>
7387
<View />
7488
</View>
@@ -117,7 +131,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
117131
onResponderTerminate={[Function]}
118132
onResponderTerminationRequest={[Function]}
119133
onStartShouldSetResponder={[Function]}
120-
visionos_hoverEffect="highlight"
134+
style={
135+
Array [
136+
Object {
137+
"cursor": "pointer",
138+
},
139+
undefined,
140+
]
141+
}
121142
>
122143
<View />
123144
</View>
@@ -154,7 +175,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
154175
onResponderTerminate={[Function]}
155176
onResponderTerminationRequest={[Function]}
156177
onStartShouldSetResponder={[Function]}
157-
visionos_hoverEffect="highlight"
178+
style={
179+
Array [
180+
Object {
181+
"cursor": "pointer",
182+
},
183+
undefined,
184+
]
185+
}
158186
>
159187
<View />
160188
</View>
@@ -207,7 +235,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
207235
onResponderTerminate={[Function]}
208236
onResponderTerminationRequest={[Function]}
209237
onStartShouldSetResponder={[Function]}
210-
visionos_hoverEffect="highlight"
238+
style={
239+
Array [
240+
Object {
241+
"cursor": "pointer",
242+
},
243+
undefined,
244+
]
245+
}
211246
>
212247
<View />
213248
</View>
@@ -244,7 +279,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
244279
onResponderTerminate={[Function]}
245280
onResponderTerminationRequest={[Function]}
246281
onStartShouldSetResponder={[Function]}
247-
visionos_hoverEffect="highlight"
282+
style={
283+
Array [
284+
Object {
285+
"cursor": "pointer",
286+
},
287+
undefined,
288+
]
289+
}
248290
>
249291
<View />
250292
</View>
@@ -299,7 +341,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
299341
onResponderTerminate={[Function]}
300342
onResponderTerminationRequest={[Function]}
301343
onStartShouldSetResponder={[Function]}
302-
visionos_hoverEffect="highlight"
344+
style={
345+
Array [
346+
Object {
347+
"cursor": "pointer",
348+
},
349+
undefined,
350+
]
351+
}
303352
>
304353
<View />
305354
</View>
@@ -336,7 +385,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
336385
onResponderTerminate={[Function]}
337386
onResponderTerminationRequest={[Function]}
338387
onStartShouldSetResponder={[Function]}
339-
visionos_hoverEffect="highlight"
388+
style={
389+
Array [
390+
Object {
391+
"cursor": "pointer",
392+
},
393+
undefined,
394+
]
395+
}
340396
>
341397
<View />
342398
</View>
@@ -399,7 +455,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
399455
onResponderTerminate={[Function]}
400456
onResponderTerminationRequest={[Function]}
401457
onStartShouldSetResponder={[Function]}
402-
visionos_hoverEffect="highlight"
458+
style={
459+
Array [
460+
Object {
461+
"cursor": "pointer",
462+
},
463+
undefined,
464+
]
465+
}
403466
>
404467
<View />
405468
</View>
@@ -436,7 +499,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
436499
onResponderTerminate={[Function]}
437500
onResponderTerminationRequest={[Function]}
438501
onStartShouldSetResponder={[Function]}
439-
visionos_hoverEffect="highlight"
502+
style={
503+
Array [
504+
Object {
505+
"cursor": "pointer",
506+
},
507+
undefined,
508+
]
509+
}
440510
>
441511
<View />
442512
</View>

‎packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
*/
1010

1111
import type {ColorValue} from '../../StyleSheet/StyleSheet';
12-
import type {HoverEffect} from '../View/ViewPropTypes';
1312
import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
1413

1514
import View from '../../Components/View/View';
@@ -33,15 +32,10 @@ type IOSProps = $ReadOnly<{|
3332
hasTVPreferredFocus?: ?boolean,
3433
|}>;
3534

36-
type VisionOSProps = $ReadOnly<{|
37-
hoverEffect?: ?HoverEffect,
38-
|}>;
39-
4035
type Props = $ReadOnly<{|
4136
...React.ElementConfig<TouchableWithoutFeedback>,
4237
...AndroidProps,
4338
...IOSProps,
44-
...VisionOSProps,
4539

4640
activeOpacity?: ?number,
4741
underlayColor?: ?ColorValue,
@@ -335,10 +329,13 @@ class TouchableHighlight extends React.Component<Props, State> {
335329
accessibilityElementsHidden={
336330
this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
337331
}
338-
style={StyleSheet.compose(
339-
this.props.style,
340-
this.state.extraStyles?.underlay,
341-
)}
332+
style={[
333+
styles.touchable,
334+
StyleSheet.compose(
335+
this.props.style,
336+
this.state.extraStyles?.underlay,
337+
),
338+
]}
342339
onLayout={this.props.onLayout}
343340
hitSlop={this.props.hitSlop}
344341
hasTVPreferredFocus={this.props.hasTVPreferredFocus}
@@ -347,7 +344,6 @@ class TouchableHighlight extends React.Component<Props, State> {
347344
nextFocusLeft={this.props.nextFocusLeft}
348345
nextFocusRight={this.props.nextFocusRight}
349346
nextFocusUp={this.props.nextFocusUp}
350-
visionos_hoverEffect={this.props.hoverEffect}
351347
focusable={
352348
this.props.focusable !== false && this.props.onPress !== undefined
353349
}
@@ -386,6 +382,12 @@ class TouchableHighlight extends React.Component<Props, State> {
386382
}
387383
}
388384

385+
const styles = StyleSheet.create({
386+
touchable: {
387+
cursor: 'pointer',
388+
},
389+
});
390+
389391
const Touchable: React.AbstractComponent<
390392
$ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
391393
React.ElementRef<typeof View>,

‎packages/react-native/Libraries/Components/Touchable/TouchableOpacity.d.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type * as React from 'react';
1111
import {Constructor} from '../../../types/private/Utilities';
1212
import {TimerMixin} from '../../../types/private/TimerMixin';
1313
import {NativeMethods} from '../../../types/public/ReactNativeTypes';
14-
import {HoverEffect, TVParallaxProperties} from '../View/ViewPropTypes';
14+
import {TVParallaxProperties} from '../View/ViewPropTypes';
1515
import {TouchableMixin} from './Touchable';
1616
import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
1717

@@ -86,11 +86,6 @@ export interface TouchableOpacityProps
8686
* @platform android
8787
*/
8888
tvParallaxProperties?: TVParallaxProperties | undefined;
89-
90-
/**
91-
* Hover style to apply to the view. Only supported on visionOS.
92-
*/
93-
visionos_hoverEffect?: HoverEffect | undefined;
9489
}
9590

9691
/**

‎packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js

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

1111
import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
12-
import type {HoverEffect} from '../View/ViewPropTypes';
1312
import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
1413

1514
import Animated from '../../Animated/Animated';
@@ -19,11 +18,10 @@ import Pressability, {
1918
} from '../../Pressability/Pressability';
2019
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
2120
import flattenStyle from '../../StyleSheet/flattenStyle';
21+
import StyleSheet from '../../StyleSheet/StyleSheet';
2222
import Platform from '../../Utilities/Platform';
2323
import * as React from 'react';
2424

25-
const defaultHoverEffect: HoverEffect = 'highlight';
26-
2725
type TVProps = $ReadOnly<{|
2826
hasTVPreferredFocus?: ?boolean,
2927
nextFocusDown?: ?number,
@@ -33,14 +31,9 @@ type TVProps = $ReadOnly<{|
3331
nextFocusUp?: ?number,
3432
|}>;
3533

36-
type VisionOSProps = $ReadOnly<{|
37-
visionos_hoverEffect?: ?HoverEffect,
38-
|}>;
39-
4034
type Props = $ReadOnly<{|
4135
...React.ElementConfig<TouchableWithoutFeedback>,
4236
...TVProps,
43-
...VisionOSProps,
4437

4538
activeOpacity?: ?number,
4639
style?: ?ViewStyleProp,
@@ -138,10 +131,6 @@ type State = $ReadOnly<{|
138131
*
139132
*/
140133
class TouchableOpacity extends React.Component<Props, State> {
141-
static defaultProps: {|visionos_hoverEffect: HoverEffect|} = {
142-
visionos_hoverEffect: defaultHoverEffect,
143-
};
144-
145134
state: State = {
146135
anim: new Animated.Value(this._getChildStyleOpacityWithDefault()),
147136
pressability: new Pressability(this._createPressabilityConfig()),
@@ -287,7 +276,7 @@ class TouchableOpacity extends React.Component<Props, State> {
287276
accessibilityElementsHidden={
288277
this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
289278
}
290-
style={[this.props.style, {opacity: this.state.anim}]}
279+
style={[styles.touchable, this.props.style, {opacity: this.state.anim}]}
291280
nativeID={this.props.id ?? this.props.nativeID}
292281
testID={this.props.testID}
293282
onLayout={this.props.onLayout}
@@ -298,7 +287,6 @@ class TouchableOpacity extends React.Component<Props, State> {
298287
nextFocusUp={this.props.nextFocusUp}
299288
hasTVPreferredFocus={this.props.hasTVPreferredFocus}
300289
hitSlop={this.props.hitSlop}
301-
visionos_hoverEffect={this.props.visionos_hoverEffect}
302290
focusable={
303291
this.props.focusable !== false && this.props.onPress !== undefined
304292
}
@@ -336,6 +324,12 @@ class TouchableOpacity extends React.Component<Props, State> {
336324
}
337325
}
338326

327+
const styles = StyleSheet.create({
328+
touchable: {
329+
cursor: 'pointer',
330+
},
331+
});
332+
339333
const Touchable: React.AbstractComponent<
340334
Props,
341335
React.ElementRef<typeof Animated.View>,

0 commit comments

Comments
 (0)