diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js index 449dbc50482afb..e72e22c525786f 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/packages/react-native/Libraries/Components/Pressable/Pressable.js @@ -24,6 +24,7 @@ import type { import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import usePressability from '../../Pressability/usePressability'; import {type RectOrSize} from '../../StyleSheet/Rect'; +import StyleSheet from '../../StyleSheet/StyleSheet'; import useMergeRefs from '../../Utilities/useMergeRefs'; import View from '../View/View'; import useAndroidRippleForView, { @@ -193,10 +194,6 @@ type Props = $ReadOnly<{| * https://github.com/facebook/react-native/issues/34424 */ 'aria-label'?: ?string, - /** - * Props needed for visionOS. - */ - ...VisionOSProps, |}>; /** @@ -344,7 +341,10 @@ function Pressable(props: Props, forwardedRef): React.Node { {...restPropsWithDefaults} {...eventHandlers} ref={mergedRef} - style={typeof style === 'function' ? style({pressed}) : style} + style={[ + styles.pressable, + typeof style === 'function' ? style({pressed}) : style, + ]} collapsable={false}> {typeof children === 'function' ? children({pressed}) : children} {__DEV__ ? : null} @@ -352,6 +352,12 @@ function Pressable(props: Props, forwardedRef): React.Node { ); } +const styles = StyleSheet.create({ + pressable: { + cursor: 'pointer', + }, +}); + function usePressState(forcePressed: boolean): [boolean, (boolean) => void] { const [pressed, setPressed] = useState(false); return [pressed || forcePressed, setPressed]; diff --git a/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap b/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap index 04af07ed3e54dd..e348e02347e52b 100644 --- a/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap +++ b/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap @@ -31,7 +31,6 @@ exports[` should render as expected: should deep render when mocked onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -68,7 +67,6 @@ exports[` should render as expected: should deep render when not mo onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -117,7 +115,6 @@ exports[` should be disabled when disabled is true: onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -154,7 +151,6 @@ exports[` should be disabled when disabled is true: onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -207,7 +203,6 @@ exports[` should be disable onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -244,7 +239,6 @@ exports[` should be disable onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -299,7 +293,6 @@ exports[` shou onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -336,7 +329,6 @@ exports[` shou onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -399,7 +391,6 @@ exports[` sh onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > @@ -436,7 +427,6 @@ exports[` sh onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - visionos_hoverEffect="highlight" > diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js index e0b0c177ec0d92..60231d8704222f 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js @@ -36,7 +36,6 @@ type Props = $ReadOnly<{| ...React.ElementConfig, ...AndroidProps, ...IOSProps, - ...VisionOSProps, activeOpacity?: ?number, underlayColor?: ?ColorValue, @@ -330,10 +329,13 @@ class TouchableHighlight extends React.Component { accessibilityElementsHidden={ this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden } - style={StyleSheet.compose( - this.props.style, - this.state.extraStyles?.underlay, - )} + style={[ + styles.touchable, + StyleSheet.compose( + this.props.style, + this.state.extraStyles?.underlay, + ), + ]} onLayout={this.props.onLayout} hitSlop={this.props.hitSlop} hasTVPreferredFocus={this.props.hasTVPreferredFocus} @@ -380,6 +382,12 @@ class TouchableHighlight extends React.Component { } } +const styles = StyleSheet.create({ + touchable: { + cursor: 'pointer', + }, +}); + const Touchable: React.AbstractComponent< $ReadOnly<$Diff|}>>, React.ElementRef, diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js index af7af7d583b159..70538a9a2a0d7c 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js @@ -18,6 +18,7 @@ import Pressability, { } from '../../Pressability/Pressability'; import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import flattenStyle from '../../StyleSheet/flattenStyle'; +import StyleSheet from '../../StyleSheet/StyleSheet'; import Platform from '../../Utilities/Platform'; import * as React from 'react'; @@ -33,7 +34,6 @@ type TVProps = $ReadOnly<{| type Props = $ReadOnly<{| ...React.ElementConfig, ...TVProps, - ...VisionOSProps, activeOpacity?: ?number, style?: ?ViewStyleProp, @@ -276,7 +276,7 @@ class TouchableOpacity extends React.Component { accessibilityElementsHidden={ this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden } - style={[this.props.style, {opacity: this.state.anim}]} + style={[styles.touchable, this.props.style, {opacity: this.state.anim}]} nativeID={this.props.id ?? this.props.nativeID} testID={this.props.testID} onLayout={this.props.onLayout} @@ -324,6 +324,12 @@ class TouchableOpacity extends React.Component { } } +const styles = StyleSheet.create({ + touchable: { + cursor: 'pointer', + }, +}); + const Touchable: React.AbstractComponent< Props, React.ElementRef, diff --git a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap index 782187fd0891c4..615db8509da9e9 100644 --- a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap +++ b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap @@ -31,10 +31,10 @@ exports[`TouchableOpacity renders correctly 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { + "cursor": "pointer", "opacity": 1, } } - visionos_hoverEffect="highlight" > Touchable @@ -76,7 +76,6 @@ exports[`TouchableOpacity renders in disabled state when a disabled prop is pass "opacity": 1, } } - visionos_hoverEffect="highlight" > Touchable @@ -118,7 +117,6 @@ exports[`TouchableOpacity renders in disabled state when a key disabled in acces "opacity": 1, } } - visionos_hoverEffect="highlight" > Touchable diff --git a/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap b/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap index e6622925664273..5b4294e0e8c850 100644 --- a/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap +++ b/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap @@ -35,7 +35,6 @@ exports[`