Add support for shadowColor on Android (API >= 28)

RNTester/js/examples/BoxShadow/BoxShadowExample.android.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+'use strict';
+
+const React = require('react');
+const {StyleSheet, View} = require('react-native');
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'white',
+    marginRight: 10,
+  },
+  elevation1: {
+    elevation: 1,
+  },
+  elevation2: {
+    elevation: 3,
+  },
+  elevation3: {
+    elevation: 10,
+  },
+  shadowColor1: {
+    shadowColor: 'red',
+  },
+  shadowColor2: {
+    shadowColor: 'blue',
+  },
+  shadowColor3: {
+    shadowColor: '#00FF0080',
+  },
+  shadowShaped: {
+    borderRadius: 50,
+  },
+  border: {
+    borderWidth: 5,
+    borderColor: '#EEE',
+  },
+});
+
+exports.title = 'Box Shadow';
+exports.description =
+  'Demonstrates some of the shadow styles available to Views.';
+exports.examples = [
+  {
+    title: 'Basic elevation',
+    description: 'elevation: 1, 3, 6',
+    render() {
+      return (
+        <View style={styles.wrapper}>
+          <View style={[styles.box, styles.elevation1]} />
+          <View style={[styles.box, styles.elevation2]} />
+          <View style={[styles.box, styles.elevation3]} />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Fractional elevation',
+    description: 'elevation: 0.1, 0.5, 1.5',
+    render() {
+      return (
+        <View style={styles.wrapper}>
+          <View style={[styles.box, {elevation: 0.1}]} />
+          <View style={[styles.box, {elevation: 0.5}]} />
+          <View style={[styles.box, {elevation: 1.5}]} />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Colored shadow',
+    description: "shadowColor: 'red', 'blue', '#00FF0080'",
+    render() {
+      return (
+        <View style={styles.wrapper}>
+          <View style={[styles.box, styles.elevation1, styles.shadowColor1]} />
+          <View style={[styles.box, styles.elevation2, styles.shadowColor2]} />
+          <View style={[styles.box, styles.elevation3, styles.shadowColor3]} />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Shaped shadow',
+    description: 'borderRadius: 50',
+    render() {
+      return (
+        <View style={styles.wrapper}>
+          <View style={[styles.box, styles.elevation1, styles.shadowShaped]} />
+          <View style={[styles.box, styles.elevation2, styles.shadowShaped]} />
+          <View style={[styles.box, styles.elevation3, styles.shadowShaped]} />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Borders',
+    description: 'borderWidth: 5',
+    render() {
+      return (
+        <View style={styles.wrapper}>
+          <View style={[styles.box, styles.elevation1, styles.border]} />
+          <View style={[styles.box, styles.elevation2, styles.border]} />
+          <View style={[styles.box, styles.elevation3, styles.border]} />
+        </View>
+      );
+    },
+  },
+];

RNTester/js/utils/RNTesterList.android.js

@@ -144,6 +144,10 @@ const APIExamples: Array<RNTesterExample> = [
     key: 'BorderExample',
     module: require('../examples/Border/BorderExample'),
   },
+  {
+    key: 'BoxShadowExample',
+    module: require('../examples/BoxShadow/BoxShadowExample'),
+  },
   {
     key: 'ClipboardExample',
     module: require('../examples/Clipboard/ClipboardExample'),

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -95,6 +95,18 @@ public void setElevation(@NonNull T view, float elevation) {
     ViewCompat.setElevation(view, PixelUtil.toPixelFromDIP(elevation));
   }
 
+  @Override
+  @ReactProp(
+      name = ViewProps.SHADOW_COLOR,
+      defaultInt = Color.BLACK,
+      customType = "Color")
+  public void setShadowColor(@NonNull T view, int shadowColor) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      view.setOutlineAmbientShadowColor(shadowColor);
+      view.setOutlineSpotShadowColor(shadowColor);
+    }
+  }
+
   @Override
   @ReactProp(name = ViewProps.Z_INDEX)
   public void setZIndex(@NonNull T view, float zIndex) {

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java

@@ -13,8 +13,8 @@
 import com.facebook.react.bridge.ReadableMap;
 
 /**
- * This is an interface that should be implemented by view managers supporting the base view
- * properties such as backgroundColor, opacity, etc.
+ * This is an interface that should be implemented by view managers supporting
+ * the base view properties such as backgroundColor, opacity, etc.
  */
 public interface BaseViewManagerInterface<T extends View> {
   void setAccessibilityActions(T view, @Nullable ReadableArray accessibilityActions);
@@ -43,6 +43,8 @@ public interface BaseViewManagerInterface<T extends View> {
 
   void setElevation(T view, float elevation);
 
+  void setShadowColor(T view, int shadowColor);
+
   void setImportantForAccessibility(T view, @Nullable String importantForAccessibility);
 
   void setNativeId(T view, @Nullable String nativeId);

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -139,6 +139,7 @@ public class ViewProps {
 
   public static final String TRANSFORM = "transform";
   public static final String ELEVATION = "elevation";
+  public static final String SHADOW_COLOR = "shadowColor";
   public static final String Z_INDEX = "zIndex";
   public static final String RENDER_TO_HARDWARE_TEXTURE = "renderToHardwareTextureAndroid";
   public static final String ACCESSIBILITY_LABEL = "accessibilityLabel";