Add shadow inconsistency opacity fix with updated tests (cherry pick of #1402) (#1411)

* Redo shadow opacity consistency fix

* Update test that was introducing redboxes

* Fix yarn flow-check-ios errors

* Add comment linking to github issue

* Update comment

Author: lyzhan7

React/Views/RCTView.h

@@ -148,6 +148,12 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 @property (nonatomic, copy) RCTDirectEventBlock onKeyUp;
 @property (nonatomic, copy) NSArray<NSString*> *validKeysDown;
 @property (nonatomic, copy) NSArray<NSString*> *validKeysUp;
+
+// Shadow Properties
+@property (nonatomic, strong) NSColor *shadowColor;
+@property (nonatomic, assign) CGFloat shadowOpacity;
+@property (nonatomic, assign) CGFloat shadowRadius;
+@property (nonatomic, assign) CGSize shadowOffset;
 #endif // ]TODO(macOS GH#774)
 
 /**

React/Views/RCTView.m

@@ -164,6 +164,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _hitTestEdgeInsets = UIEdgeInsetsZero;
 #if TARGET_OS_OSX // TODO(macOS GH#774)
     _transform3D = CATransform3DIdentity;
+    _shadowColor = nil;
 #endif // TODO(macOS GH#774)
 
     _backgroundColor = super.backgroundColor;
@@ -726,20 +727,49 @@ - (NSString *)description
 #endif // TODO(macOS GH#774)
 
 #if TARGET_OS_OSX // [TODO(macOS GH#774)
-// Workaround AppKit issue with directly manipulating the view layer's shadow.
-- (NSShadow*)shadow
+- (void)setShadowColor:(NSColor *)shadowColor
 {
-  CALayer *layer = self.layer;
-  NSShadow *shadow = nil;
+    if (_shadowColor != shadowColor)
+    {
+        _shadowColor = shadowColor;
+        [self didUpdateShadow];
+    }
+}
 
-  if (layer.shadowColor != nil && layer.shadowOpacity > 0) {
-    shadow = [NSShadow new];
+- (void)setShadowOffset:(CGSize)shadowOffset
+{
+    if (!CGSizeEqualToSize(_shadowOffset, shadowOffset))
+    {
+        _shadowOffset = shadowOffset;
+        [self didUpdateShadow];
+    }
+}
 
-    shadow.shadowColor = [[NSColor colorWithCGColor:layer.shadowColor] colorWithAlphaComponent:layer.shadowOpacity];
-    shadow.shadowOffset = layer.shadowOffset;
-    shadow.shadowBlurRadius = layer.shadowRadius;
-  }
-  return shadow;
+- (void)setShadowOpacity:(CGFloat)shadowOpacity
+{
+    if (_shadowOpacity != shadowOpacity)
+    {
+        _shadowOpacity = shadowOpacity;
+        [self didUpdateShadow];
+    }
+}
+
+- (void)setShadowRadius:(CGFloat)shadowRadius
+{
+    if (_shadowRadius != shadowRadius)
+    {
+        _shadowRadius = shadowRadius;
+        [self didUpdateShadow];
+    }
+}
+
+-(void)didUpdateShadow
+{
+    NSShadow *shadow = [NSShadow new];
+    shadow.shadowColor = [[self shadowColor] colorWithAlphaComponent:[self shadowOpacity]];
+    shadow.shadowOffset = [self shadowOffset];
+    shadow.shadowBlurRadius = [self shadowRadius];
+    [self setShadow:shadow];
 }
 
 - (void)viewDidMoveToWindow

React/Views/RCTViewManager.m

@@ -192,10 +192,19 @@ - (RCTShadowView *)shadowView
 #else // [TODO(macOS GH#774)
 RCT_REMAP_VIEW_PROPERTY(opacity, alphaValue, CGFloat)
 #endif // ]TODO(macOS GH#774)
+
+#if !TARGET_OS_OSX // TODO(macOS GH#774)
 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)
+#else // [TODO(macOS GH#774)
+RCT_EXPORT_VIEW_PROPERTY(shadowColor, NSColor)
+RCT_EXPORT_VIEW_PROPERTY(shadowOffset, CGSize)
+RCT_EXPORT_VIEW_PROPERTY(shadowOpacity, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(shadowRadius, CGFloat)
+#endif // ]TODO(macOS GH#774)
+
 RCT_REMAP_VIEW_PROPERTY(needsOffscreenAlphaCompositing, layer.allowsGroupOpacity, BOOL)
 RCT_CUSTOM_VIEW_PROPERTY(overflow, YGOverflow, RCTView)
 {

packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js

@@ -139,10 +139,11 @@ const styles = StyleSheet.create({
   headerText: {
     fontSize: 25,
     color: 'white',
-    shadowRadius: 3,
-    shadowColor: 'black',
-    shadowOpacity: 1,
-    shadowOffset: {height: 1},
+    // [TODO(macOS GH#1409)
+    textShadowRadius: 3,
+    textShadowColor: 'rgba(0, 0, 0, 1.0)',
+    textShadowOffset: {height: 1, width: 0},
+    // ]TODO(macOS GH#1409)
   },
 });