Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new macOS View prop allowsVibrancy #1889

Merged
merged 6 commits into from
Aug 9, 2023
Merged

Conversation

Saadnajmi
Copy link
Collaborator

@Saadnajmi Saadnajmi commented Jul 24, 2023

Please select one of the following

  • I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
  • I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
  • I am making a fix / change for the macOS implementation of react-native
  • I am making a change required for Microsoft usage of react-native

Summary

Appkit has a prop allowsVibrancy that will allow Appkit to subtly change the colors of an NSView inside an NSVisualEffectView to get that "vibrant" effect. There's a property we can override on NSView for custom NSViews so we can get the effect too. Let's expose it on macOS so that we can set it through Javascript. One caveat is the Appkit property is readonly, so I had to add a new RCTView property allowsVibrancyInternal that the RCTView getter then reads.

https://developer.apple.com/documentation/appkit/nsview/1483793-allowsvibrancy

Changelog

[MACOS] [ADDED] - Add new macOS View prop allowsVibrancy

Test Plan

Prototyping this inside FluentUI React Native (by just.. making every RCTView set allowsVibrancy = true), you can clearly see a difference between the two Callouts. Both have a solid background color set to them, but one will "blend" the colors of the window behind it, AKA, the vibrant effect.

Without (notice the solid pink):
Screenshot 2023-08-07 at 11 12 17 PM

With (notice the pink is blended on the top left):
Screenshot 2023-08-07 at 11 11 49 PM

@Saadnajmi Saadnajmi changed the title [Draft] Add new macOS View prop allowsVibrancy Add new macOS View prop allowsVibrancy Aug 8, 2023
@Saadnajmi Saadnajmi marked this pull request as ready for review August 8, 2023 08:26
@Saadnajmi Saadnajmi requested a review from a team as a code owner August 8, 2023 08:26
@Saadnajmi Saadnajmi merged commit db882e9 into microsoft:main Aug 9, 2023
17 of 18 checks passed
@Saadnajmi Saadnajmi deleted the vibrancy branch August 9, 2023 22:43
Saadnajmi added a commit to Saadnajmi/react-native-macos that referenced this pull request Aug 9, 2023
* Add new macOS View prop `allowsVibrancy`

* fix lint

* small fixes

* fix lint

* no super
Saadnajmi added a commit that referenced this pull request Aug 9, 2023
* Add new macOS View prop `allowsVibrancy`

* fix lint

* small fixes

* fix lint

* no super
@AdrianFahrbach
Copy link

Does this enable us to replicate translucent sidebars like this?
image
Because I'm currently using a NSVisualEffectView and using this with custom themes is quite difficult.

Oh and sorry for digging through your pull requests, I hope you don't mind 😅
I really enjoy using your library so far!

@Saadnajmi
Copy link
Collaborator Author

@AdrianFahrbach Yep! See this PR where I make a native module for VibrancyView: microsoft/fluentui-react-native#3026

I wanted to upstream it to https://github.com/Kureev/react-native-blur eventually, there's just more extra code needed than I'd like.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants