[0.73] No hover effect after integrating into the existing project

[duguyihou]

Description

We intend to integrate vision os to our existing project. We followed the docs but we cannot see the hover effect.

Steps to reproduce

1. yarn start
2. open the XXXX.wxworkspace in the visionos folder
3. notice no hover effect when looking at the list item.

React Native Version

0.73.12

Affected Platforms

Other (please specify)

Output of npx react-native info

System:
 OS: macOS 14.6.1
 CPU: (10) arm64 Apple M1 Pro
 Memory: 1.31 GB / 32.00 GB
 Shell:
 version: "5.9"
 path: /bin/zsh
Binaries:
 Node:
 version: 18.14.0
 path: ~/.volta/tools/image/node/18.14.0/bin/node
 Yarn:
 version: 3.6.4
 path: ~/.volta/tools/image/yarn/4.3.1/bin/yarn
 npm:
 version: 9.3.1
 path: ~/.volta/tools/image/node/18.14.0/bin/npm
 Watchman:
 version: 2024.06.10.00
 path: /opt/homebrew/bin/watchman
Managers:
 CocoaPods:
 version: 1.15.2
 path: /Users/kong.hou/.rbenv/shims/pod
SDKs:
 iOS SDK:
 Platforms:
 - DriverKit 23.5
 - iOS 17.5
 - macOS 14.5
 - tvOS 17.5
 - visionOS 1.2
 - watchOS 10.5
 Android SDK: Not Found
IDEs:
 Android Studio: 2023.1 AI-231.9392.1.2311.11330709
 Xcode:
 version: 15.4/15F31d
 path: /usr/bin/xcodebuild
Languages:
 Java:
 version: 17.0.10
 path: /usr/bin/javac
 Ruby:
 version: 2.7.6
 path: /Users/kong.hou/.rbenv/shims/ruby
npmPackages:
 "@react-native-community/cli": Not Found
 react:
 installed: 18.2.0
 wanted: 18.2.0
 react-native:
 installed: 0.73.8
 wanted: 0.73.8
 react-native-macos: Not Found
npmGlobalPackages:
 "*react-native*": Not Found
Android:
 hermesEnabled: true
 newArchEnabled: false
iOS:
 hermesEnabled: true
 newArchEnabled: false

### Stacktrace or Logs

```text
no log

Reproducer

https://github.com/duguyihou/AwesomeProject

Screenshots and Videos

no_hover_effect.mov

[Saadnajmi]

I think you may need to pass the style prop cursor: 'pointer' to whatever Touchable/Pressable/View you want to have a hover effect, as its' not set by default

[duguyihou]

hey @Saadnajmi

it is applied by default according to the react-native-visionos docs. And I can see hover effect in a new project.

[okwasniewski]

Hey, I've just checked it with the latest version and everything works as expected. Im going to try with 0.73 now!

[okwasniewski]

So it looks like React Native 0.73 (upstream) doesn't have this PR cherry-picked which prevents the metro resolver from being called: react#41697

I'm afraid cherry-pick back to 0.73 won't be possible but I'll see what I can do. In the meantime, you can add {cursor: 'pointer'} style just like @Saadnajmi mentioned or upgrade to React Native 0.74.

[duguyihou]

hey @okwasniewski

I tried to add cursor: 'pointer' but it does not work. Maybe we have to upgrade to React Native 0.74.

[okwasniewski]

We've made many upstream improvements for React Native 0.74, so I highly recommend updating.

I've checked, and indeed, it's not working for 0.73. Let's keep this issue open until it gets fixed.

Let me know if the update resolves this issue for you.

[duguyihou]

@okwasniewski

Yes, I can see hover effect in 0.74.4.

hover_effect_0.74.4.mov

[okwasniewski]

Hey,

Unfortunately, we are going to close this issue as React Native 0.76 is just around the corner cutting the support for 0.73.

Hopefully, the upgrade went smoothy for you!