Fix inconsistent shadows

[lyzhan7]

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

Pull request #1227 mostly fixed the consistency issue but had a problem with the shadow opacity. There isn't a shadowOpacity property on NSShadow, the shadow opacity from the layer needed to be passed into the alpha channel of the NSShadow shadowColor property.

Fixes #824

Test Plan

This fix was tested with the fluentui-react-native tester app.

Before:

before.mov

After:

afteropacityfix.mov

[lyzhan7]

Note: We tried an additional approach to fix this, since the root issue behind this bug is that modifying certain layer props (including shadow related ones) on a layer owned by an NSView is undefined behavior, and we are still doing this in RCTViewManager with RCT_REMAP_VIEW_PROPERTY

RCT_REMAP_VIEW_PROPERTY(shadowColor, layer.shadowColor, CGColor)
RCT_REMAP_VIEW_PROPERTY(shadowOffset, layer.shadowOffset, CGSize)
RCT_REMAP_VIEW_PROPERTY(shadowOpacity, layer.shadowOpacity, float)
RCT_REMAP_VIEW_PROPERTY(shadowRadius, layer.shadowRadius, CGFloat)

In the second approach, rather than modifying RCTView.m, we changed RCTViewManager.m to use RCT_CUSTOM_VIEW_PROPERTY instead of RCT_REMAP_VIEW_PROPERTY, and set the view.shadow there.

We decided to keep the original approach since the result is the same, it's simpler and there will be less diffs between React Native macOS and React Native Core. If there are further issues with shadow rendering consistency this could be something we revisit.

[pull-bot]

Messages

📖

📋 Missing Changelog - Can you add a Changelog? To do so, add a "## Changelog" section to your PR description. A changelog entry has the following format: [CATEGORY] [TYPE] - Message. CATEGORY may be: General macOS iOS Android JavaScript Internal (for changes that do not need to be called out in the release notes) TYPE may be: Added, for new features. Changed, for changes in existing functionality. Deprecated, for soon-to-be removed features. Removed, for now removed features. Fixed, for any bug fixes. Security, in case of vulnerabilities. MESSAGE may answer "what and why" on a feature level. Use this to briefly tell React Native users about notable changes.

Generated by 🚫 dangerJS against 0051dac

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: e532f86
Branch: main