search

ptmt / react-native-macos

[deprecated in favor of https://microsoft.github.io/react-native-windows/] React Native for macOS is an experimental fork for writing desktop apps using Cocoa
MIT License
11.25k stars 429 forks source link

Vibrancy where vibrancy should not be #201

Open LoganDark opened 6 years ago

LoganDark commented 6 years ago

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

The UI explorer app, but my macOS is 10.14 Mojave.

Steps to Reproduce

Open the app.

Expected Behavior

The app should not be vibrant underneath certain controls (like buttons, etc)

Actual Behavior

image

There's vibrancy under the 'inline' button

image

There's vibrancy under the switches and radios

image

There's vibrancy under the spinners

image

The sidebar does not react well to vibrancy

image

Vibrancy under all single-line text fields

Reproducible Demo

https://github.com/ptmt/react-native-macos/files/199128/UIExplorer.zip

ptmt commented 6 years ago

Installed Mojave yesterday:) working on it

On Sat, 16 Jun 2018 at 05:32, LoganDark notifications@github.com wrote:

Is this a bug report?

Yes Have you read the Contributing Guidelines https://facebook.github.io/react-native/docs/contributing.html?

Yes Environment

The UI explorer app, but my macOS is 10.14 Mojave. Steps to Reproduce

Open the app. Expected Behavior

The app should not be vibrant underneath certain controls (like buttons, etc) Actual Behavior

[image: image] https://user-images.githubusercontent.com/4723091/41494990-f49eabd0-70d1-11e8-98d0-c93cca1f0cfe.png

There's vibrancy under the 'inline' button

[image: image] https://user-images.githubusercontent.com/4723091/41494991-ffb21b06-70d1-11e8-8d10-b30da30b3660.png

There's vibrancy under the switches and radios

[image: image] https://user-images.githubusercontent.com/4723091/41494996-0f7d5078-70d2-11e8-8193-565d222adefe.png

There's vibrancy under the spinners

[image: image] https://user-images.githubusercontent.com/4723091/41495000-1baecc32-70d2-11e8-86fd-0abac15e3bda.png

The sidebar does not react well to vibrancy

[image: image] https://user-images.githubusercontent.com/4723091/41495006-43741254-70d2-11e8-8d50-062634e497f1.png

Vibrancy under all single-line text fields Reproducible Demo

https://github.com/ptmt/react-native-macos/files/199128/UIExplorer.zip

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ptmt/react-native-macos/issues/201, or mute the thread https://github.com/notifications/unsubscribe-auth/AA9SU9bTE3-7EEP-MEF8ZII-xRFVkxpHks5t9G4jgaJpZM4UqUkM .

LoganDark commented 6 years ago

I'd also be completely okay with dark mode support

ptmt commented 6 years ago

Current progress: I added AppearanceManager that allows using system colors, that depends on the theme. Fixed default color for text, it's not white anymore. Trying to eluminate hardcoded color constants now.

screenshot 2018-06-16 23 42 03

(of course, the initial issue still needs to be fixed)

LoganDark commented 6 years ago

LGTM, is an updated UIExplorer available yet?

ptmt commented 6 years ago

It's now RNTester in the latest version. I haven't finished yet, will keep posting here.

ptmt commented 6 years ago

Weird issues, fixed them, but it's not final. Also watched WWDC sessions about dark mode and want to improve the whole approach.

screenshot 2018-06-17 22 34 20 screenshot 2018-06-17 22 34 09
aleclarson commented 5 years ago

@ptmt Can this be closed? Nevermind!

LoganDark commented 5 years ago

@aleclarson Can I have a pre-built version of RNTester without the vibrancy issues?

aleclarson commented 5 years ago

It's hard to tell if the "inline button" still has this issue, but I can confirm the others do still (except the sidebar seems to look fine now). No timeline on when I'll get around to solving this.

LoganDark commented 5 years ago

Then please do not close the issue.

aleclarson commented 5 years ago

@LoganDark Wasn't planning on it! 😉

aleclarson commented 5 years ago

We probably want to disable allowsVibrancy on all views by default, and add an allowsVibrancy prop to RCTView.

edit: Eh, that doesn't seem to work..

aleclarson commented 5 years ago

In the documentation on NSVisualEffectView, Apple says:

It is recommended that you enable vibrancy only in the leaf views of your view hierarchy. Subviews inherit the vibrancy of their parent. Once enabled in a parent view, a subview cannot turn off vibrancy. As a result, enabling vibrancy in a parent view can lead to subviews that look incorrect if they are not designed to take advantage of the vibrancy effect.

So the problem is that RCTRootView inherits from NSVisualEffectView and has vibrancy enabled by default.

We should disable vibrancy by default in RCTRootView and provide some mechanism for enabling such vibrancy in "leaf views" (as Apple puts it).