Skip to content

Add cursor style prop - #4033

Merged
Simek merged 3 commits into
react:mainfrom
Saadnajmi:cursor
Mar 15, 2024
Merged

Add cursor style prop#4033
Simek merged 3 commits into
react:mainfrom
Saadnajmi:cursor

Conversation

@Saadnajmi

@SaadnajmiSaadnajmi commented Mar 2, 2024

Copy link
Copy Markdown
Contributor

Related: react/react-native#43078

Update the docs with the new cursor style prop, provided the above PR lands.

Comment threaddocs/view-style-props.md Outdated
@netlify

netlifyBot commented Mar 2, 2024

Copy link
Copy Markdown

Deploy Preview for react-native ready!

NameLink
🔨 Latest commit6cd6dc5
🔍 Latest deploy loghttps://app.netlify.com/sites/react-native/deploys/65e61e405f0e1500082a0081
😎 Deploy Previewhttps://deploy-preview-4033--react-native.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@SimekSimek added the 🕐 Waiting on PR These may be waiting for a PR to the facebook/react-native to be merged label Mar 2, 2024
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Mar 5, 2024
Summary:
Implement the cursor style prop for iOS (and consequently, visionOS), as described in this RFC: react-native-community/discussions-and-proposals#750
See related PR in React Native macOS, where we target macOS and visionOS (not running in iPad compatibility mode) with the same change: microsoft#2080
Docs update: react/react-native-website#4033
## Changelog:
[IOS] [ADDED] - Implement cursor style prop
Pull Request resolved: #43078
Test Plan:
See the added example page, running on iOS with the new architecture enabled. This also runs the same on the old architecture.
https://github.com/facebook/react-native/assets/6722175/2af60a0c-1c1f-45c4-8d66-a20f6d5815df
See the example page running on all three apple platforms. The JS is slightly different because:
1. The "macOS Cursors" example is not part of this PR but the one in React Native macOS.
2. This PR (and exapmple) has went though a bunch of iterations and It got hard taking videos of every change 😅
https://github.com/facebook/react-native/assets/6722175/7775ba7c-8624-4873-a735-7665b94b7233
## Notes
- React Native macOS added the cursor prop to View with microsoft#760 and Text with microsoft#1469 . Much of the implementation comes from there.
- Due to an Apple bug, as of iOS 17.4 Beta 4, the shape of the iOS cursor hover effect doesn't render in the correct bounds (but it does on visionOS). I've worked around it with an ifdef. The result is that the hover effect will work on iOS and visionOS, but not iPad apps running in compatibility mode on visionOS.
Reviewed By: NickGerleman
Differential Revision: D54512945
Pulled By: vincentriemer
fbshipit-source-id: 699e3a01a901f55a466a2c1a19f667aede5aab80
huntie pushed a commit to react/react-native that referenced this pull request Mar 11, 2024
Summary:
Implement the cursor style prop for iOS (and consequently, visionOS), as described in this RFC: react-native-community/discussions-and-proposals#750
See related PR in React Native macOS, where we target macOS and visionOS (not running in iPad compatibility mode) with the same change: microsoft#2080
Docs update: react/react-native-website#4033
## Changelog:
[IOS] [ADDED] - Implement cursor style prop
Pull Request resolved: #43078
Test Plan:
See the added example page, running on iOS with the new architecture enabled. This also runs the same on the old architecture.
https://github.com/facebook/react-native/assets/6722175/2af60a0c-1c1f-45c4-8d66-a20f6d5815df
See the example page running on all three apple platforms. The JS is slightly different because:
1. The "macOS Cursors" example is not part of this PR but the one in React Native macOS.
2. This PR (and exapmple) has went though a bunch of iterations and It got hard taking videos of every change 😅
https://github.com/facebook/react-native/assets/6722175/7775ba7c-8624-4873-a735-7665b94b7233
## Notes
- React Native macOS added the cursor prop to View with microsoft#760 and Text with microsoft#1469 . Much of the implementation comes from there.
- Due to an Apple bug, as of iOS 17.4 Beta 4, the shape of the iOS cursor hover effect doesn't render in the correct bounds (but it does on visionOS). I've worked around it with an ifdef. The result is that the hover effect will work on iOS and visionOS, but not iPad apps running in compatibility mode on visionOS.
Reviewed By: NickGerleman
Differential Revision: D54512945
Pulled By: vincentriemer
fbshipit-source-id: 699e3a01a901f55a466a2c1a19f667aede5aab80
@Saadnajmi

Saadnajmi commented Mar 15, 2024

Copy link
Copy Markdown
ContributorAuthor

This landed in 0.74, so should be safe to merge? @Simek

@SimekSimek left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 👌

@Simek
Simek merged commit 20c3ab7 into react:mainMar 15, 2024
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed🕐 Waiting on PRThese may be waiting for a PR to the facebook/react-native to be mergedp: microsoftPartner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@Saadnajmi@Simek@facebook-github-bot